Заметки
программиста
 
Популярные статьи
 
Полезные ссылки

Цвет placeholder css

23.09.2019

В HTML5 к полям формы добавлен атрибут placeholder, который устанавливает замещающий текст. Такой текст отображается серым цветом и пропадает, когда поле получает фокус. Использование этого атрибута достаточно просто, следует только написать текст, всё остальное браузер берет на себя.

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

Как мы видим текст placeholder у нас не белый, а серый. Хотя в стилях указан белый цвет текста. Чтобы изменить цвет placeholder надо в CSS добавить следующий код

<style>
  ::-webkit-input-placeholder {color:#F00;}/*webkit*/
  ::-moz-placeholder          {color:#F00;}/*Firefox 19+*/
  :-moz-placeholder           {color:#F00;}/*Firefox 18-*/
  :-ms-input-placeholder      {color:#F00;}/*IE */
</style>

Теперь у нас красный цвет placeholder, но в некоторых браузерах цвет подсказки идет светлее. Чтобы это исправить, надо добавить свойство opacity:1

<style>
  ::-webkit-input-placeholder {color:#F00; opacity:1;}/*webkit*/
  ::-moz-placeholder          {color:#F00; opacity:1;}/*Firefox 19+*/
  :-moz-placeholder           {color:#F00; opacity:1;}/*Firefox 18-*/
  :-ms-input-placeholder      {color:#F00; opacity:1;}/*IE*/
</style>

 
Об этом блоге

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