::placeholderПсевдо элемент (или псевдо - класс, в некоторых случаях, в зависимости от реализации браузера) позволяет стилизовать текст - заполнитель элемента формы. Как в тексте, установленном с placeholderатрибутом:
Вы можете стилизовать этот текст в большинстве браузеров с помощью этого небольшого количества селекторов с префиксом поставщика:
::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )Важное предупреждение: этот синтаксис нестандартен, отсюда и безумие именования. Его вообще нет в спецификации. :placeholder-shownявляется стандартным, и даже авторы спецификаций думают, что ::placeholderэто будет стандартизованная версия.
Как и любой псевдо-объект, вы можете ограничить его определенными элементами по мере необходимости, например:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Демо
Разница между :placeholder-shownи::placeholder
:placeholder-shownпредназначен для выбора самого ввода, когда отображается текст заполнителя. В отличие от ::placeholderстилей текста-заполнителя.
Вот диаграмма:
Я нашел это очень запутанным:
- в спецификациях есть только
:placeholder-shownи нет::placeholder :placeholder-shownможет по-прежнему влиять на стиль текста заполнителя, поскольку это родительский элемент (например, размер шрифта).
Обратите внимание , что :placeholder-shownэто псевдо класс (это элемент в определенном состоянии) и ::placeholderявляется псевдо элемент (видимая вещь, которая на самом деле не в DOM). Отличается одинарным или двойным двоеточием.
Таб Аткинс объяснил мне это по электронной почте:
: placeholder-shown, будучи псевдоклассом, должен выбрать существующий элемент - он выбирает ввод, когда вы находитесь в состоянии отображения заполнителя. Псевдоэлемент :: placeholder оборачивает фактический текст заполнителя.
Элемент или класс?
Эта функциональность не стандартизирована. Это означает, что у каждого браузера свое представление о том, как он должен работать.
Изначально Firefox реализовал это как псевдокласс, но изменил его по ряду причин. Короче говоря, вы не можете сделать так много с псевдоклассом.
Например, если вы хотите изменить цвет текста, когда ввод находится в фокусе. Вы бы использовали селектор, например input:focus::placeholder, что вы не смогли бы сделать с псевдоклассом (они не складываются одинаково).
IE10 поддерживает это как псевдокласс, а не как элемент. Все остальные реализовали псевдоэлемент.
Цвет заполнителя Firefox
Вы могли заметить, как в Firefox цвет заполнителя выглядит блеклым по сравнению с другими браузерами. На изображении ниже Firefox 43 показан слева, а Chrome 47 - справа:
Это связано с тем, что по умолчанию ко всем заполнителям в Firefox применяется значение непрозрачности, поэтому, чтобы исправить это, нам нужно сбросить это значение:
::-moz-placeholder ( opacity: 1; )Вы можете увидеть больше, протестировав эту демонстрацию в Firefox.
Поддерживаемые стили
Псевдоэлемент поддерживает стилизацию этих свойств:
fontхарактеристикиcolorbackgroundхарактеристикиword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Псевдокласс поддерживает большинство (если не все) из этих свойств, но не так гибок по причинам, изложенным выше.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 57 | 19 * | Нет | 79 | 10.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 10,3 |
Связанные свойства
Альманах на 22 мая 2020 г.: показанный заполнитель
input:placeholder-shown ( border: 5px solid red; ) 
Джефф Грэм