Стилизация placeholder на чистом CSS

29 просмотров
Автор: Николай Ковалёв

Атрибут placeholder используется в полях форм и представляет собой некую подсказку для пользователей. Иногда приходится стилизовать эту подсказку под дизайн сайта, поэтому в этой статье мы рассмотрим самый простой и самый удобный способ стилизации placeholder с использованием только CSS.

Вот пример, как используется атрибут с тегами input и textarea:

<input type="text" placeholder="Введите текст">
<textarea cols="30" rows="5" placeholder="Введите текст"></textarea>

Чтобы стилизовать placeholder, воспользуемся такими CSS правилами:

::-webkit-input-placeholder { color: #c5c5c5; }
::-moz-placeholder          { color: #c5c5c5; } /*Firefox 19+*/
:-moz-placeholder           { color: #c5c5c5; } /*Firefox 18-*/
:-ms-input-placeholder      { color: #c5c5c5; }

Сейчас мы изменили только цвет текста, но так же можно изменить следующие свойства:

  • background
  • opacity
  • text-decoration
  • text-transform
  • padding
  • line-height
  • letter-spacing
  • word-spacing
  • font-weight
  • font-style
  • font-size
  • text-overflow
  • text-indent
  • vertical-align

Как скрыть placeholder при клике по полю

Чтобы при клике по полю placeholder скрывался, используйте следующие правила:

:focus::-webkit-input-placeholder { color: transparent; }
:focus::-moz-placeholder          { color: transparent; }
:focus:-moz-placeholder           { color: transparent; }
:focus:-ms-input-placeholder      { color: transparent; }