Стилизация HTML5 плейсхолдера с помощью CSS

В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:

<input type=«text» placeholder=«type here some text» />

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

Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.

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

input::-webkit-input-placeholder {}
input:-moz-placeholder {}


Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете:

input:-moz-placeholder,
input::-webkit-input-placeholder { }


то CSS правила не будут работать. И обратите внимание, что для webkit надо писать два двоеточия, а для mozilla — одно.


Еще несколько примеров:

/* стили для webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field4::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px; color:#999;
}

/* стили для mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder {
color:#090; background:lightgreen;
text-transform:uppercase;
}
#field4:-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}


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

Список поддерживаемых CSS стилей для атрибута 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	нет	нет	+	нет	+	нет