Пятница , 29 Март 2024
ДомойПубликацииКак изменить цвет placeholder с помощью css

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

Что такое placeholder (плейсхолдер)? Это английское слово переводится как заполнитель. Используется в качестве пояснения или примера в полях ввода текста (имя, фамилия, e-mail и т. п.), в виде атрибута.

На данный момент поддерживается всеми современными браузерами. Ранее работа эмулировалась с помощью JavaScript. Элемент доказал свою пользу и разработчики браузеров ввели дополнительные свойства, позволяющие стилизовать «заполнитель» под свой дизайн.

Placeholder

Сначала следует текст про атрибут и примеры его использования. Если это не интересно, можете сразу перейти к теме статьи.

До сих пор нет единого мнения, является ли селектор выбора плейсхолдера псевдоклассом или псевдоэлементом. Браузеры на основе WebKit/blink и Gecko (Firefox 19+) считают псевдоклассом (:smile, обозреватели Internet Explorer (движок Trident) и Firefox 18- относят к псевдоэлементам (smile. Opera 12 вообще не позволяет изменять оформление, хотя атрибут поддерживается. И пока в CSS не будет официально закреплён этот пресдо-тип, склока между разработчиками продолжится.

К счастью, устаревшие браузеры довольно оперативно заменяются новыми версиями — Chrome и Firefox с ускоренным циклом разработки «дисциплинировали» пользователей.

Если решите поддерживать старые версии обозревателей (Opera 12, IE8 для Windows XP, IE9 — Windows Vista), придётся действовать с помощью JavaScript.

Про placeholder сказал уже кучу раз, давайте посмотрим, как его можно использовать.

Как обычно выглядит форма:

Ваше имя:

В коде:

<form><p>Ваше имя:<br><input value=""></p></form>

Пример с плейсхолдером:

Код:

<form><p><input value="" placeholder="Ваше имя"></p></form>

Таким нехитрым способом удаётся сократить итоговые размеры форм. Увы, но в примере выше есть один недостаток: внешний вид плейсхолдера отдаётся на откуп браузеру. Если учесть, что многие обозреватели устанавливают цвет заполнителя серым, это лишает возможности использовать серые поля ввода.

Изменяем вид placeholder посредством css


::-webkit-input-placeholder { /* вид для Chrome/Safari/... */ }
::-moz-placeholder { /* вид для Firefox */ }
:-ms-input-placeholder { /* вид для IE */ }

Теперь, сделаем цвет плейсхолдера оранжевым и более блеклым (полупрозрачным):

Код:


::-webkit-input-placeholder { color:#f80; opacity:.5; }
::-moz-placeholder { color:#f80; opacity:.5; }
:-ms-input-placeholder { color:#f80; opacity:.5; }

Результат:

Вот и всё. Пользуйтесь smile

Рейтинг: 0

Автор публикации

2 070
не в сети 11 месяцев

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (2 голосов, в среднем: 5,00 из 5)
Загрузка...

Оставить комментарий

Политика конфиденциальности

Наш сайт использует файлы cookies, чтобы улучшить работу и повысить эффективность сайта. Продолжая работу с сайтом, вы соглашаетесь с использованием нами cookies и политикой конфиденциальности.

Принять