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

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

Псевдоэлемент :: 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 имеют значение непрозрачности, применяемое к ним, поэтому, чтобы исправить это, нам нужно сбросить это значение:

:: - moz-placeholder { непрозрачность: 1; }
Вы можете увидеть больше, протестировав эту демонстрацию в Firefox.

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

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

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

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

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

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

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

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

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

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

Похожие шаблоны

Услуги по созданию сайта на вордпресс.

Рубрики

Лучшие шаблоны для Wordpress

Подписка на новые шаблоны
Введите свой email:

Доставка от FeedBurner

Миниатюра к услугам.

WordPress Услуги

  • Настройка шаблона
  • Лечение сайта
  • Перевод темы

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

Оставьте свой комментарий