:placeholder-shownПсевдо-класс выбирает сам входной элемент , когда замещающий текст существует в форме ввода. Думайте об этом как о хорошем способе отличить входные данные, которые в настоящее время показывают текст-заполнитель, от тех, которые не отображаются.
input:placeholder-shown ( border: 5px solid red; )Идея заполнителей
Текстовые и входные данные могут содержать текст-заполнитель. Это текст, который отображается, когда поле ввода пусто, чтобы предложить возможное значение. Например, форма с запросом о школе может иметь ярлык для того, что она запрашивает, но затем предлагать «Пример средней школы Forest Hills» в качестве примера значения:
School Name: Разница между :placeholder-shownи::placeholder
:placeholder-shownпредназначен для выбора самого ввода, когда отображается текст заполнителя. В отличие от ::placeholderстилей текста-заполнителя.
Вот диаграмма:
Я нашел это очень запутанным:
- в спецификациях есть только
:placeholder-shownи нет::placeholder :placeholder-shownможет по-прежнему влиять на стиль текста заполнителя, поскольку это родительский элемент (например, размер шрифта).
Обратите внимание , что :placeholder-shownэто псевдо- класс (это элемент в определенном состоянии) и ::placeholderявляется псевдо- элемент (видимая вещь, которая на самом деле не в DOM). Отличается одинарным или двойным двоеточием.
Таб Аткинс объяснил мне это по электронной почте:
:placeholder-shown, будучи псевдоклассом, должен выбрать существующий элемент. Он выбирает ввод всякий раз, когда вы находитесь в состоянии отображения заполнителя.::placeholderПсевдо-элемент обертывание фактического текста - заполнителя.
Если вам нужно стилизовать текст заполнителя
Используйте ::placeholder (на самом деле, используйте для этого все безумные префиксы поставщиков), которые мы подробно описали в Альманахе здесь.
Дополнительная информация
- Селекторы уровня 4 Спецификация
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 9,0-9,2 |