Placeholder – стилизация и сокрытие при фокусе

Placeholder – текст в поле формы, подсказывающий пользователю, какие данные он должен ввести. Стандартный цвет текста плейсхолдера – светлосерый. Также стандартный плейсхолдер не пропадает при клике в поле, что может вызвать некоторое замешательство. Эти неудобства мы исправим с помощь стилей.

1. Задаем цвет placeholder следующими свойствами:

input::-webkit-input-placeholder {color:#000;}
input::-moz-placeholder {color:#000;}
input:-moz-placeholder {color:#000;}
input:-ms-input-placeholder {color:#000;}

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

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

Все.