Псевдокласс :placeholder

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

Применить

HTML

<input type="text" placeholder="Текст Placeholder" />

или

<textarea placeholder="Текст Placeholder"></textarea>

CSS

:-ms-input-placeholder { /* IE */
  color: green;  
  }
  
  ::-ms-input-placeholder { /* Edge */
  color: green;  
  }
  
  ::-webkit-input-placeholder { /* Cr,Op,Sf */
  color: green;
  }
  
  :-moz-placeholder { /* Fr 4-19 */
  color: green;
  }
  
  ::-moz-placeholder { /* Fr 4-19 */
  color: green;  
  }
  
  :placeholder-shown { /* Cr,Op,Sf */
  color: green;
  }
  • Псевдокласс :-ms-input-placeholder для Internet Explorer.
  • Псевдоэлемент ::-ms-input-placeholder для Microsoft Edge.
  • Псевдоэлемент ::-webkit-input-placeholder для Chrome, Opera и Safari.
  • Псевдокласс :-moz-placeholder для Firefox 4 до Firefox 19.
  • Псевдоэлемент ::-moz-placeholder для Firefox.
  • Псевдокласс :placeholder-shown для Chrome, Opera и Safari.

В CSS3 стиль для текста с атрибутом placeholder можно определить так:

input[placeholder] {
  color: green;
}

Поддержка

Псевдокласс :placeholder-shown является селектором четвёртого уровня CSS4.

Еще псевдоклассы CSS4