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

Атрибут 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; }