Как сделать редактируемый DIV похожим на текстовое поле?

У меня есть DIV, у которого contentEditable=true, поэтому пользователь может его отредактировать. Проблема в том, что он не похож на текстовое поле, поэтому пользователю может быть неясно, что он может быть отредактирован.

Есть ли способ, которым я могу создать стиль DIV, чтобы он отображался пользователю как текстовое поле ввода?

Ответы

Ответ 1

Они выглядят так же, как и их реальные аналоги в Safari, Chrome и Firefox. Они деградируют изящно и выглядят ОК в Opera и IE9 тоже.

Демо: http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS

textarea {
    height: 28px;
    width: 400px;
}

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

input {
    margin-top: 5px;
    width: 400px;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

HTML:

<textarea>I am a textarea</textarea>
<div id="textarea" contenteditable>I look like textarea</div>

<input value="I am an input" />
<div id="input" contenteditable>I look like an input</div>

Вывод:

enter image description here

Ответ 2

В WebKit вы можете сделать: -webkit-appearance: textarea;

Ответ 3

Если вы используете bootstrap, просто добавьте класс form-control. Например:

class="form-control"

Ответ 4

Вы можете использовать внутреннюю тень окна:

div[contenteditable=true] {
  box-shadow: inset 0px 1px 4px #666;
}

Я обновил jsfiddle от Jarish: http://jsfiddle.net/ZevvE/2/

Ответ 5

Я бы предложил это для соответствия стилю Chrome, расширенного от примера Jarish. Обратите внимание на свойство курсора, о котором предыдущие ответы опустили.

cursor: text;
border: 1px solid #ccc;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 200px;
overflow: auto;
padding: 2px;
resize: both;
-moz-box-shadow: inset 0px 1px 2px #ccc;
-webkit-box-shadow: inset 0px 1px 2px #ccc;
box-shadow: inset 0px 1px 2px #ccc;

Ответ 6

Вы можете поместить TEXTAREA с аналогичным размером под своим DIV, поэтому стандартная рамка управления будет видна вокруг div.

Вероятно, полезно отключить его, чтобы избежать случайного фокуса.

Ответ 7

Проблема со всем этим заключается в том, что они не адресуют, если строки текста длинны и намного шире, чем переполнение div: auto не объявляет полосу прокрутки, которая работает правильно. Вот идеальное решение, которое я нашел:

Создайте два div. Внутренний div, достаточно широкий, чтобы обрабатывать самую широкую строку текста, а затем меньшую внешнюю, которая действует на держатель для внутреннего div:

<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;">
    <div style="width:800px;">

     now really long text like this can be put in the text area and it will really <br/>
     look and act more like a real text area bla bla bla <br/>

    </div>
</div>