Как стилизовать текст заполнителя элемента формы с помощью псевдоэлемента :: placeholder

Комментариев нет

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

Вы можете стилизовать этот текст в большинстве браузеров с помощью небольшого количества селекторов с префиксом поставщика браузера:

Обратите внимание

Этот синтаксис нестандартен, поэтому все его называют безумием. Он вообще не отображается в спецификации. : placeholder-shown является стандартным, и даже разработчики, похоже, думают, что :: placeholder будет стандартизированной версией.

Как любой псевдо, вы можете дополнить его конкретными элементами по мере необходимости, например:

input [type = "email"]. big-dog :: - webkit-input-placeholder.

Пример

Разница между : placeholder-show и :: placeholder

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

Вот диаграмма:

Мы нашли это очень запутанным, поскольку в спецификациях есть только : placeholder-show и нет :: placeholder и :placeholder-shows может по-прежнему влиять на стиль текста-заполнителя, поскольку это родительский элемент (например, размер шрифта).

Обратите внимание

:placeholder-show – псевдо-класс (это элемент в определенном состоянии), а ::placeholder – псевдо-элемент (видимая часть, которая на самом деле не находится в DOM). Различаются двойными двоеточиями.

Tab Atkins очистил его для нас в электронной почте:

: placeholder-shown, являющийся псевдо-классом, должен выбрать существующий элемент – он выбирает вход, когда вы находитесь в состоянии placeholder-showing. Псевдоэлемент :: placeholder окружает фактический текст заполнителя.

Элемент или класс?

Эта функциональность не стандартизирована. Это означает, что у каждого браузера свое мнение о том, как он должен работать.

Firefox первоначально реализовал это как псевдо-класс, но изменил его по целому ряду причин. Короче говоря, вы не можете сделать так много с псевдо-классом.

Например, если вы хотите изменить цвет текста при фокусировке ввода. Вы бы использовали селектор типа input: focus :: placeholder, который вы не смогли бы сделать с псевдоклассом (они не складываются одинаково).

IE10 поддерживает это как псевдо-класс, а не элемент. Все остальные реализовали псевдоэ-лемент.

Цвет заставки Firefox

Вы можете заметить, как в Firefox цвет заполнителя выглядит померкшим по сравнению с другими браузерами. На изображении ниже Firefox 43 отображается слева, а Chrome 47 показан справа:

Версия Chrome – это стиль, который мы хотели бы видеть повсюду.

Это связано с тем, что по умолчанию все заполнители в Firefox имеют значение непрозрачности, применяемое к ним, поэтому, чтобы исправить это, нам нужно сбросить это значение:

Вы можете увидеть больше, протестировав эту демонстрацию в Firefox.

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

Псевдо-элемент поддерживает стилизацию этих свойств:

свойства шрифта
цвет
фоновые свойства
слово-интервал
межбуквенное расстояние
текст-отделка
вертикальные выравнивания
текст-преобразование
высота линии
отступ текста
помутнение

Псевдокласс поддерживает большинство (если не все) этих свойств, но не так гибко по причинам, изложенным выше.

Другие источники

Документы MDN.
Документы IE.
Полная статья о блоге Treehouse.
Обоснование псевдо-элемента.

Поддержка браузера

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

Firefox поддерживает псевдокласс до версии 18. Версия 19+ поддерживает псевдо-элемент, а не класс.

Источник: https://css-tricks.com/almanac/selectors/p/placeholder/

(Всего посетителей: 2 799, сегодня: 1)

Алексей Шевченко

Автор и редактор на wptheme.us

Опыт работы с WordPress более 10 лет. Создал более 1500 сайтов на Вордпресс. Перевел более 400 тем на русский и украинский язык. Сотни вылеченных сайтов от вирусов. Тысячи установленных и настроенных плагинов. Задать вопрос мне можно на https://profiles.wordpress.org/wpthemeus/

Заказать установку или сайт на этом шаблоне