Главная » Языки программирования

Textarea css стилизация placeholder

На чтение 9 мин
Содержание
  1. Textarea css стилизация placeholder
  2. А если placeholder не вмещается?
  3. Как скрыть placeholder при фокусе?
  4. Скрываем placeholder красиво
  5. Стилизуем Placeholder с помощью CSS
  6. Префиксы
  7. Псевдоэлемент против псевдокласса
  8. Непрозрачность Placeholder в Firefox по умолчанию
  9. CSS-обработка неверных селекторов
  10. Поддерживаемые стили
  11. Проблемы доступности
  12. Автоматически добавлять Vendor-префиксы
  13. : : placeholder
  14. Пример
  15. Как понять
  16. Как пишется
  17. Подсказки
  18. На практике
  19. Денис Ежков советует
  20. Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5
  21. html
  22. css
  23. А если placeholder не вмещается?
  24. css
  25. Как скрыть placeholder при фокусе?
  26. css
  27. Скрываем placeholder красиво
  28. css

Textarea css стилизация placeholder

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

Стиль placeholder-a можно изменить с помощью такого набора css правил:

 ::-webkit-input-placeholder ::-moz-placeholder /* Firefox 19+ */ :-moz-placeholder /* Firefox 18- */ :-ms-input-placeholder

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:

  • font (и сопутствующие свойства)
  • background (и сопутствующие свойства)
  • color
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • text-overflow
  • opacity

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.

 input[placeholder] input::-moz-placeholder input:-moz-placeholder input:-ms-input-placeholder

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

  1. в некоторых браузерах при получении фокуса инпутом
  2. в других браузерах при наличии хотя бы одного введенного символа

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

 :focus::-webkit-input-placeholder :focus::-moz-placeholder :focus:-moz-placeholder :focus:-ms-input-placeholder

Скрываем placeholder красиво

 /* плавное изменение прозрачности placeholder-а при фокусе */ .input1::-webkit-input-placeholder .input1::-moz-placeholder .input1:-moz-placeholder .input1:-ms-input-placeholder .input1:focus::-webkit-input-placeholder .input1:focus::-moz-placeholder .input1:focus:-moz-placeholder .input1:focus:-ms-input-placeholder /* сдвиг placeholder-а вправо при фокусе*/ .input2::-webkit-input-placeholder .input2::-moz-placeholder .input2:-moz-placeholder .input2:-ms-input-placeholder .input2:focus::-webkit-input-placeholder .input2:focus::-moz-placeholder .input2:focus:-moz-placeholder .input2:focus:-ms-input-placeholder /* сдвиг placeholder-а вниз при фокусе*/ .input3::-webkit-input-placeholder .input3::-moz-placeholder .input3:-moz-placeholder .input3:-ms-input-placeholder .input3:focus::-webkit-input-placeholder .input3:focus::-moz-placeholder .input3:focus:-moz-placeholder .input3:focus:-ms-input-placeholder

Оригинал статьи был взят с сайта html5.by

Источник

Стилизуем Placeholder с помощью CSS

Используйте псевдоэлемент ::placeholder для стилизации дефолтного текста в элементе input или textarea . Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.

Читайте также:  Bitrix services main ajax php

Префиксы

Используемый мной синтаксис поддерживается большинством современных браузеров:

Но для более старых браузеров вам нужно будет использовать префиксы поставщика.

/* WebKit, Edge */ ::-webkit-input-placeholder < color: deeppink; >/* Firefox 4-18 */ :-moz-placeholder < color: deeppink; opacity: 1; >/* Firefox 19+ */ ::-moz-placeholder < color: deeppink; opacity: 1; >/* IE 10-11 */ :-ms-input-placeholder < color: deeppink; >/* Edge */ ::-ms-input-placeholder < color: deeppink; >/* MODERN BROWSER */ ::placeholder

Вау! Я знаю, это огромный список. И вы можете заметить довольно много разных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит.

Псевдоэлемент против псевдокласса

Вы можете заметить, что я использую двойное двоеточие :: . Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие : , это назвали бы псевдоклассом.

Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.

Следовательно, в нашем ::placeholder префиксе поставщика вы будете использовать смесь псевдокласса и псевдоэлемента.

Непрозрачность Placeholder в Firefox по умолчанию

Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.

CSS-обработка неверных селекторов

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

::-moz-placeholder, /* Firefox 19+ */ :-moz-placeholder /* Firefox 4-18 */

Ну, это потому, что в CSS3 было правило, которое гласит:

группа селекторов, содержащая недопустимый селектор, недействительна.

Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор

Так что в нашем HTML это будет выглядеть как ожидалось

Но что произойдет, если мы добавим неверный селектор CSS

h1, /* valid */ h2::poop /* invalid */

Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.

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

⭐️ НО! похоже, это можно изменить в CSS4.

Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.

Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»

Читайте также:  Css цвет фона изображения

Поддерживаемые стили

Вот список всех стилей, которые вы можете применить к вашему placeholder:

  • background свойства
  • color
  • font свойства
  • letter-spacing
  • line-height
  • opacity
  • text-decoration
  • text-indent
  • text-transform
  • vertical-align
  • word-spacing

Проблемы доступности

Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки !! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.

Вот действительно потрясающая статья о том, как использовать заполнители без каких-либо меток. Ниже приведены три основных тезиса:

  1. Поскольку placeholder исчезает в при вводе, он может напрягать кратковременную память вашего пользователя
  2. Без label пользователи не могут проверить свою работу перед отправкой формы.
  3. Когда появляются сообщения об ошибках, люди не знают, как решить проблему.

Автоматически добавлять Vendor-префиксы

Если вы не хотите иметь дело со всеми префиксами вендоров, вы можете использовать PostCSS с плагином Autoprefixer . Этот плагин будет анализировать ваш CSS и добавлять префиксы.

Источник

: : placeholder

Псевдоэлемент : : placeholder используется для стилизации текста-подсказки (плейсхолдера) в полях ввода и .

Пример

Скопировать ссылку «Пример» Скопировано

  input class="form-input" type="email" placeholder="Например: mygre@ema.il">      
 .form-input::placeholder  color: gray;> .form-input::placeholder  color: gray; >

Как понять

Скопировать ссылку "Как понять" Скопировано

Как пишется

Скопировать ссылку "Как пишется" Скопировано

Два двоеточия и ключевое слово placeholder .

Стиль применится ко всем подсказкам на странице:

 ::placeholder  color: gray;> ::placeholder  color: gray; >

Стиль применится только к подсказкам у полей ввода с классом email - input :

 .email-input::placeholder  color: darkblue;> .email-input::placeholder  color: darkblue; >

Подсказки

Скопировать ссылку "Подсказки" Скопировано

💡 Для стилизации подсказки можно использовать только следующие свойства:

  • все шрифтовые свойства, начинающиеся с font (например, font - size или font - style );
  • все свойства для работы с фоном, начинающиеся с background - (например, background - color или background - size );
  • свойство color ;
  • свойства word - spacing , letter - spacing , text - decoration , text - transform и line - height ;
  • свойства text - shadow , группу свойств text - decoration и vertical - align .

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

🛠 Желательно стилизовать подсказку таким образом, чтобы визуально она отличалась от введённого текста. Как правило, её делают полупрозрачной, либо просто светлее вводимого текста.

Источник

Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

html

Стиль placeholder-a можно изменить с помощью такого набора css правил:

css

::-webkit-input-placeholder ::-moz-placeholder /* Firefox 19+ */ :-moz-placeholder /* Firefox 18- */ :-ms-input-placeholder

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:

  • font (и сопутствующие свойства)
  • background (и сопутствующие свойства)
  • color
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • text-overflow
  • opacity

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis . Такой синтаксис будет работать во всех новых браузерах.

css

input[placeholder] input::-moz-placeholder input:-moz-placeholder input:-ms-input-placeholder

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

  1. в некоторых браузерах при получении фокуса инпутом
  2. в других браузерах при наличии хотя бы одного введенного символа

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

css

:focus::-webkit-input-placeholder :focus::-moz-placeholder :focus:-moz-placeholder :focus:-ms-input-placeholder

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a:

css

/* плавное изменение прозрачности placeholder-а при фокусе */ .input1::-webkit-input-placeholder .input1::-moz-placeholder .input1:-moz-placeholder .input1:-ms-input-placeholder .input1:focus::-webkit-input-placeholder .input1:focus::-moz-placeholder .input1:focus:-moz-placeholder .input1:focus:-ms-input-placeholder /* сдвиг placeholder-а вправо при фокусе*/ .input2::-webkit-input-placeholder .input2::-moz-placeholder .input2:-moz-placeholder .input2:-ms-input-placeholder .input2:focus::-webkit-input-placeholder .input2:focus::-moz-placeholder .input2:focus:-moz-placeholder .input2:focus:-ms-input-placeholder /* сдвиг placeholder-а вниз при фокусе*/ .input3::-webkit-input-placeholder .input3::-moz-placeholder .input3:-moz-placeholder .input3:-ms-input-placeholder .input3:focus::-webkit-input-placeholder .input3:focus::-moz-placeholder .input3:focus:-moz-placeholder .input3:focus:-ms-input-placeholder

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

Источник

Оцените статью
© 2023 Программирование