Я'ве получил див
, который contentEditable=true
с, так что пользователь может редактировать его. Проблема в том, что он не'т выглядеть как текстовое поле, поэтому он не может понять пользователю, что он может быть отредактирован.
Есть ли способ, что я могу стиле див
, так что он предстает перед пользователем как поле ввода текста?
Эти выглядят так же, как их реальные аналоги в Safari, Chrome и Firefox. Они изящно деградируют и выглядят нормально в опере и IE9 тоже.
Демо:
Усс:
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>
Выход:
Если вы используете бутстрап просто добавить форму-контроля класса. Например:
class="form-control"
В WebKit, вы можете сделать: -в WebKit-внешний вид: компонент textarea;
Я предложил бы это для сопоставления кром's стиль, расширенными от Jarish'ы например. Обратите внимание на свойство cursor, которое предыдущие ответы были опущены.
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;
Вы можете разместить текстовое поле аналогичного размера под ваш див, так что уровень контроля'ы рама будет видна вокруг див.
Это'ы, наверное, хорошо, чтобы установить его, чтобы быть отключен, чтобы предотвратить случайное фокуса.
Проблема со всеми этими они не'т адрес, если строки текста уже давно и гораздо шире, что див с overflow:авто не объявление полосу прокрутки, которая работает правильно. Вот идеальное решение я нашел:
Создать два ДИВС. Внутренний 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>