https://habr.com/ru/users/everythingispossible/publications/articles/ ru editor@habr.com habr.com Fri, 01 May 2026 04:27:42 GMT https://habr.com/ru/ https://habrastorage.org/webt/ym/el/wk/ymelwk3zy1gawz4nkejl_-ammtc.png https://habr.com/ru/articles/313094/ https://habr.com/ru/articles/313094/?utm_campaign=313094&utm_source=habrahabr&utm_medium=rss способов подчеркивания в CSS.

Странно, что в такой хорошей подборке не указан простой способ с использованием псевдокласса :after.
Показать HTML, CSS]]> Wed, 19 Oct 2016 10:11:17 GMT https://habr.com/ru/articles/268947/ https://habr.com/ru/articles/268947/?utm_campaign=268947&utm_source=habrahabr&utm_medium=rss
Понадобилось сделать многострочный placeholder в textarea. Выяснилось, что Firefox, в отличие от всех других современных браузеров, не поддерживает перенос строки в элементе placeholder. Хотя делает он это в соответствии с W3C спецификацией — радости это не добавляет.

Все нагугленные решения не понравились. Ставить JQuery-плагины только ради переноса строк в Firefox не хотелось. Решил попробовать сделать свой placeholder во вспомогательном блоке. В итоге получилось вот такое простое решение, которое работает во всех браузерах и предоставляет широкие возможности для кастомизации placeholder.

Стандартное поведение реализуется с помощью jQuery (используется у меня в проекте, при необходимости легко заменяется чистым JS). Если вам нравится скрывать placeholder, когда поле попадает в фокус, то можно обойтись только CSS.

Посмотреть пример на jsfiddle.

UPD
Спасибо gwer за подсказки.

Изменения и уточнения:

• на чистом CSS работать не будет, без JS не обойтись
• в JS нужно использовать событие 'input'. Тогда placeholder исчезает и при вставке из буфера обмена через контекстное меню.

Показать HTML, CSS, JS]]> Fri, 16 Oct 2015 11:36:08 GMT