От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по стилизации плейсхолдеров.
Видеоурок и его текстовую версию по псевдоэлементам можно посмотреть по ссылке.
P значит плейсхолдер
Для создания сложных дизайнерских решений без лишнего раздувания разметки несемантическими элементами отлично подходят псевдоэлементы :before и :after. Другие псевдоэлементы типа :first-line и :first-letter позволяют стилизовать отдельные части элементов, которые не помечены в разметке документа.
В видеоуроке мы рассмотрели множество псевдоэлементов, однако мы не разобрали псевдоэлемент, позволяющий стилизовать текст в плейсхолдерах. Исправим же это упущение.
Как выбрать плейсхолдер
Представим следующий код:
|
1 |
<input class="name-field" type="text" placeholder="Enter your name"> |
Цвет вводимого текста можно сделать красным:
|
1 2 3 |
.name-field { color: red; } |
Также это поле можно было бы найти и стилизовать по атрибуту плейсхолдера:
|
1 2 3 |
input[placeholder="Enter your name"] { color: red; } |
Однако так мы стилизуем вводимый текст, а не текст плейсхолдера. Тут нам поможет несколько селекторов с вендорными префиксами псевдоэлемента плейсхолдер.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
::-webkit-input-placeholder { color: red; } :-moz-placeholder {/*Firefox 18-*/ color: red; } ::-moz-placeholder {/*Firefox 19+*/ color: red; } :-ms-input-placeholder { color: red; } |
Вы можете сказать, что здесь код повторяется, однако другого более чистого способа просто нет. Код ниже работать не будет:
|
1 2 3 4 5 6 |
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color: red; } |
Чтобы применить стили внутри фигурных скобок, браузер должен «понимать» каждый селектор, разделенный запятой.
Стилизация плейсхолдера с помощью Sass
Чтобы не повторять CSS код, можно написать Sass миксин. Миксин ниже я использую в 99% своих проектов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@mixin input-placeholder { ::-webkit-input-placeholder { @content; } :-moz-placeholder {/* Firefox 18- */ @content; } ::-moz-placeholder {/* Firefox 19+ */ @content; } :-ms-input-placeholder { @content; } } /* применение */ @include input-placeholder { color: red; } |
С его помощью я могу стилизовать плейсхолдеры во всех браузерах с помощью всего одного вызова @include, что позволяет сократить код и сделать его удобным для дальнейшего обслуживания.
Внимательно смотрите на объявления, когда стилизуете плейсхолдеры
В браузерах IE стили для самого поля формы могут переписывать стили плейсхолдера.
|
1 2 3 4 5 6 |
:-ms-input-placeholder { color: red; } input[type="text"] { color: blue; /* В IE цвет плейсхолдера будет синий */ } |
Задавайте для стилей плейсхолдера в IE большую специфичность, чтобы они правильно применялись. Тут даже можно прибегнуть к !important, но будьте осторожны с таким мощным инструментом.
Не забывайте про прозрачность плейсхолдеров
В Firefox плейсхолдеры имеют по умолчанию прозрачность opacity примерно в 0.5. Таким образом, если сделать текст плейсхолдера красным, то на выходе вы получите приглушенный цвет. Или же можно задать свойство opacity: 1. В этом случае не поможет даже Normalize.css. Если в вашем проекте плейсхолдеры должны быть непрозрачными, помните об этом!
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
