Атрибут ::placeholder CSS

Псевдоэлемент ::placeholder color (в некоторых случаях псевдокласс) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder: <input type="email" placeholder="jane@firefly.com">.

Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:

::-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 предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.

Взгляните на диаграмму:

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

Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом (например, можно изменять font-size).

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

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

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

В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.

Изначально этот псевдокласс был внедрён в браузер Firefox. Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder. А псевдокласс не позволяет этого сделать.

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

Цвет заглушки в Firefox

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

Так происходит потому, что по умолчанию все «заглушки» в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:

::-moz-placeholder {
  opacity: 1;
}

Попробуйте открыть это демо в браузере Firefox.

Поддержка стилей

Псевдоэлемент поддерживает следующие свойства:

• font properties;
• color;
• background properties;
• word-spacing;
• letter-spacing;
• text-decoration;
• vertical-align;
• text-transform;
• line-height;
• text-indent;
• opacity;

Дополнительные ресурсы

Документация MDN
Документация IE
Развёрнутая статья на блоге Treehouse

Браузерная поддержка

Здесь имеется в виду как нативная поддержка CSS input placeholder color, так и поддержка, реализуемая с помощью префиксов.

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

Валентин Сейидовавтор-переводчик статьи «::placeholder»