Стилизуем HTML5 Placeholder на CSS

В HTML5 появился замечательный атрибут тега INPUT под названием placeholder (подсказывающий текст). Для стилизации которого так же можно применить CSS как и для любого другого тега.

Сейчас я покажу, как это сделать при помощи CSS-правил.

Чтобы не быть голословным, сразу пример

Для браузера Firefox используются другие правила в отличии от Safari и Google Chrome.

/* для всех */
::-webkit-input-placeholder  { color:#f00; }
input:-moz-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;
}

Пример

Поддержка

Нельзя совмещать селекторы ::-webkit-input-placeholder и :-moz-placeholder в один - работать не будет! И обратите внимание на количество двоеточий для конкретного браузера!

Список поддерживаемых CSS стилей

Ссылки

• Оригинал статьи
• -moz-placeholder

Похожие публикации:

1. TTF шрифты на веб-странице
   Хотите использовать не стандартный шрифт на вашей веб-странице? Уже сейчас многие браузеры способны отображать TTF-шрифты, используя только CSS: последние версии...
2. Блоки с тенью для всех браузеров, кроме Opera
   Сейчас тень для блоков в CSS3 поддерживается браузерами: Firefox ≥ 3.1, Safari ≥ 3 и Chrome. В Internet Explorer тень можно эмулировать,...
3. Горизонтальное Dropline меню на CSS и jQuery
   Для создания Dropline меню достаточно HTML4 и CSS2, но всеми известный Internet Explorer 6 постоянно портит картину и приходится ставить...
4. Стилизуем посещённые ссылки
   Абсолютно все браузеры (хотя возможны и исключения) могут отличать посещенные и непосещенные ссылки. Если воспользоваться данной функцией, то можно получить...
5. Тестирование HTML5-видео на YouTube
   Наконец-то произошел переход YouTube на использование HTML5-тегов для проигрывания видео (в режиме тестирования). По умолчанию используется обычный плеер, чтобы выбрать...

Теги: CSS

Поделиться: