Стилизуем HTML5 placeholder на CSS
В HTML5 появился замечательный атрибут тега <input>
под названием placeholder
(подсказывающий текст). Для стилизации которого так же можно применить CSS-стили через псевдо-селектор :placeholder
как и для любого другого тега.
Чтобы не быть голословным, сразу пример
Для браузера Firefox используются другие правила в отличие от Safari и Google Chrome.
/* для всех */ ::-webkit-input-placeholder { color:#f00; } :-moz-placeholder { color:#f00; } :-ms-input-placeholder { color:#f00; } /* только для 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; }
Поддержка браузерами псевдоселектора placeholder
Браузер | Поддержка с версии |
---|---|
Firefox | 4 (Gecko 2.0) |
Google Chrome | 5 |
Internet Explorer | 10 |
Нельзя совмещать селекторы ::-webkit-input-placeholder
и :-moz-placeholder
в один — работать не будет! И обратите внимание на количество двоеточий для конкретного браузера!
Список поддерживаемых CSS стилей
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 | нет | нет | + | нет | + | нет |
RTFM
- Оригинал статьи
- Style Placeholder Text
- :-moz-placeholder
- :-ms-input-placeholder pseudo-class
- Атрибут placeholder
- Caniuse placeholder
- Спецификация
Не пашет…
Вообще не показывает, будто нет плейсхолдера совсем…
Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.9.1.3) Gecko/20091020 Ubuntu/9.10 (karmic) Firefox/3.5.3
Смотрите таблицу поддержки браузерами. Вашу я выдел красным.
в отличиЕ
Спасибо, исправил )
Вот примеры http://html5.by/blog/placeholder для стилизации placeholder
Спасибо за ссылку