Как изменить цвет placeholder.

Как известно, буквально несколько лет назад в браузерах появилась интересная возможность устанавливать для текстовых полей input на веб-страницах какие-то текстовые значение по умолчанию.

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

Такой эффект достигается за счет использования атрибута placeholder. Почитать подробнее об этом атрибуте можно здесь.

Сегодня хочу поделиться техникой, как вы можете менять цвет текста, который создается с помощью этого атрибута.

Чтобы понять, как это делается, посмотрите на следующий пример:

HTML:

<input type="text" placeholder="Плэсхолдер">

CSS:

::-webkit-input-placeholder { /* WebKit browsers */
   color:    red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    red;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    red;
}

Довольно интересная техника, нашел ее на англоязычном форуме. Надеюсь, что для вас она также как и для меня окажется полезной.