понедельник, 26 марта 2012 г.

Как изменить цвет HTML5 placeholder с помощью CSS

В HTML5 появился такой атрибут как placeholder. Он позволяет выводить текстовую подсказку внутри input элементов. Определяется атрибут следующим образом

<input type="text" placeholder="Value" />

Теперь вернемся непосредственно к определению стилистики текста placeholder-а.

CSS правила для webkit и mozilla

  1. input::-webkit-input-placeholder {color:#999;}
  2. input::-moz-placeholder {color:#999;}
Для определения стилей для input и textarea одновременно необходимо просто упустить название тега:
  1. ::-webkit-input-placeholder {color:#999;}
  2. ::-moz-placeholder {color:#999;}
Если вам нужны общие правила для браузеров этих семейств, то их можно совместить. Также стоит заметить, что разные браузеры имеют разную поддержку данного атрибута. Например, в Firefox вы можете поставить фон этому элементу, а в Chrome — нет.

Список атрибутов, которые можно менять для текста placeholder.

Chrome 10 (Win 7)Chrome 11 (Win 7)Firefox 4 (Win 7)Safari 3.1 (Win XP & OS X)Safari 5 (Win 7 & OS X)Opera 11 (Win 7)
background-color--
+-
+-
border-
-
+-
+-
color+++-
+-
font-size+++-
+-
font-style+++-
+-
font-weight+++-
+-
letter-spacing+++-
+-
line-height-
-
--
-
-
padding top/bottom-
-
+-
+-
padding left/right-
-
+-
-
-
text-decoration-
-
+-
+-
text-transform- 
- 
+-
+-
Привел специально версию таблицы для старых браузеров, так как они самая большая проблема. Следить за обновлениями по совместимости можно на странице http://caniuse.com/input-placeholder.