Как сделать div для ввода текстовой формы?

Question

Есть некоторые недостатки, использующие textarea и input-text в качестве ввода текстовых форм.textarea имеет маленький раздражающий треугольник в правом нижнем углу, а input-text - однострочный ввод.

Я пытаюсь ввести текст, такой как форма ввода обновления facebookВвод автоматического изменения размера после переноса строки.И используемый элемент или тег был <div>.Я сказал «использовал», потому что после того, как они изменили дизайн Facebook, я не могу понять, какой тег используется сейчас.Существует свойство CSS, которое позволяет пользователю редактировать текст в элементе div.Я на самом деле скопировал свойство CSS, но теперь я его потерял.Может кто-нибудь сказать мне, какое свойство CSS это было?У меня слабая память, которая началась с префикса -webkit, хотя

Answer 1

Если вы используете html5, вы можете использовать:

<div id="divThatYouCanWriteStuffIn" contenteditable>
<!-- you can write in here -->
</div>

Если вы соедините это с css:

#divThatYouCanWriteStuffIn {
    min-height: 4em; /* it should resize as required from this minimum height */
}

Чтобы избавиться от «раздражающего маленького треугольника» вtextarea s:

textarea {
  resize: none;
}

JS Fiddle демонстрация обеих идей .

Answer 2

Я знаю, что вы можете сделать это в javascript, выполнив getElementByID('mydiv').contentEditable='true';, но я не знаю, как это будет сделано в CSS

Answer 3

Вы должны иметь возможность добавлять свой стиль к текстовой области, как вы делаете с тегами, такими как p, h1, h2 и т.д ..

Таким образом, вы можете настроить таргетинг на все текстовые или те, у которых есть определенные классы или идентификаторы

Пример:

textarea    {
    font-size:11px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    line-height:140%;
    color:black;
    margin:0 0 5px 5px;
    padding:5px;
    background-color:#999999;
    border:1px solid black;
}

Этот пример будет нацелен на все текстовые поля на странице. Измените текстовую область на .nameOfClass или #nameOfId, если вы хотите указать класс или идентификатор.

Надеюсь, это поможет.

Answer 4

Поле ввода обновления Facebook является элементом TEXTAREA. Хитрость заключается в использовании свойства resize:

textarea { resize:none; }

Это заставит треугольник исчезнуть.