0

Есть некая CMS. К сайту на этой CMS применена некая тема оформления. Есть страница на этом сайте. Внешний вид отдельно взятого элемента на странице определяется кучей правил из кучи CSS-файлов темы.

На странице находится div, у которого выставлен атрибут contenteditable="true". Хочется сделать так, чтобы он выглядел как textarea. Можно конечно посмотреть какие стили применены к textarea и написать свой css который будет применяться на этот div. Но при переходе на другую тему, или может быть даже при редактировании текущей темы, придется этот css переделывать. Хотелось бы какое-нибудь удобное решение, чтобы один раз написал и оно всегда работало.

В качестве возможной альтернативы можно было бы использовать свойство CSS appearance, но оно к сожалению removed и уже не поддерживается половиной браузеров. Хочется универсальное решение, которое работает на всех браузерах, чтобы не пришлось под каждый браузер писать свой код.

В общем подскажите, как можно решить такую задачу? Может это можно сделать через javascript?

В комментариях просят добавить пример кода. Добавляю:

Тема оформления 1:

textarea {border-style: dotted;}

Тема оформления 2:

textarea {border: 3px solid; border-color: green;}

Тема оформления 3:

textarea {border: 1px solid; border-radius: 5px;}

И так далее - темы могут быть какие угодно. Собственно HTML:

<textarea>Text text text.</textarea>
<div id="user_input" class="editalbe_div">Text text text.</div>

Нужно сделать так, чтобы на любой из тем оформления данный div выглядел так же как и textarea.

1
  • напишите Ваш код в тексте вопроса
    – Alex
    17 дек 2015 в 6:52

1 ответ 1

3

Думаю, что идеальной схожести во всех браузерах будет не добиться. Таким образом, как вариант: (без appearance)

* {
    font-family: arial;
}

.textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #999;
    padding: 2px;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    resize: both;
    overflow: auto;
}


textarea {
    width: 100%;
    height: 100px;
}
<div class='textarea' contentEditable>текст текст текст</div>

<br/><br/>

<textarea>текст текст текст</textarea>

Выглядит похоже, но конечно не копия.

Для наглядности всё же продемонстрирую пример с использованием appearance

* {
    font-family: arial;
}

.textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid #999;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 100px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 100%;
}


textarea {
    width: 100%;
    height: 100px;
}
<div class='textarea' contentEditable>текст текст текст</div>

<br/><br/>

<textarea>текст текст текст</textarea>

2
  • Спасибо за ответ. При таком решении как раз есть проблема - если я переключусь на тему, в которой textarea имеет толстый край с закругленными краями, мне придется переписывать CSS для класса textarea. А хотелось бы как раз универсальное решение - чтобы один раз написал и оно всегда работало. Например, чтобы класс textarea генерировался автоматически, исходя из того, как выглядит элемент textarea в данной теме. 18 дек 2015 в 3:47
  • генерировать html + css не умеет , генератор html это php - а вы как хотите генерировать ваш .textarea?
    – user33274
    22 дек 2015 в 15:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.