Время для прочтения: 1 мин. 15 сек.

Стилизуем 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

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Dmitry Dudin

    Вот примеры http://html5.by/blog/placeholder для стилизации placeholder

    • Спасибо за ссылку

  • disqusashto

    в отличиЕ

    • Спасибо, исправил )

  • Deep

    Не пашет…
    Вообще не показывает, будто нет плейсхолдера совсем…

    Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.9.1.3) Gecko/20091020 Ubuntu/9.10 (karmic) Firefox/3.5.3

    • Смотрите таблицу поддержки браузерами. Вашу я выдел красным.