Псевдоэлемент ::placeholder
Псевдоэлемент ::placeholder позволит вам оформить внешний вид текста, который выводится с помощью атрибута placeholder для любого текстового поля формы. Как правило, используются теги <input> атрибутом type="text" или "email", но также их часто можно встретить в полях типа "url" или "search":
| 1 2 3 4 | <p><input type="text" name="name" placeholder="Иван Иваныч"></p> <p><input type="email" name="email" placeholder="info@mysite.com"></p> <p><input type="url" name="site" placeholder="//html-plus.in.ua"></p> <p><input type="search" name="sitesearch" placeholder="Поиск по сайту"></p> |
Для того чтобы стилизовать псевдоэлемент ::placeholder пока еще необходимо использовать вендорные префиксы для разных браузеров:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /* Chrome/Opera/Safari до 2017 года*/ ::-webkit-input-placeholder { color: orange; } /* Firefox 19-50 */ ::-moz-placeholder { color: orange; } /* Firefox 4-18 */ :-moz-placeholder { color: orange; } /* IE 10+ */ :-ms-input-placeholder { color: orange; } /*Microsoft Edge */ ::-ms-input-placeholder{ color: orange; } |
Поддержку этого псевдоэлемента можно посмотреть на сайте caniuse.com
Пример ниже показывает, как можно изменить цвет шрифта во всех полях формы.
See the Pen Псевдоэлемент ::placeholder by Elen (@ambassador) on CodePen.
В примере поле с type="search" имеет другой цвет текста в placeholder. Чтобы изменить цвет для определенного типа поля, необходимо записать стили этого псевдоэлемента так:
| 1 2 3 | input[type="search"]::placeholder { color: #09f; } |
Плюс к основному правилу для поддержки более старых браузеров, необходимо добавить все вендорные префиксы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | input[type="search"]::-webkit-input-placeholder{ color: #09f; } input[type="search"]:-moz-placeholder { color: #09f; } input[type="search"]::-moz-placeholder { color: #09f; } input[type="search"]:-ms-input-placeholder { color: #09f; } input[type="search"]::-ms-input-placeholder { color: #09f; } |
Если рассмотреть синтаксис чуть пристальней, то мы увидим, что часть браузеров использует псевдоэлемент ::placeholder с двумя двоеточиями, а другая часть - псевдокласс :placeholder с одним двоеточием перед названием.
Важный момент: в css-правилах вы можете использовать не все свойства, а только те, что перечислены ниже:
colorfontи все связанные свойства (font-size,font-familyи т.д.)text-decorationtext-indenttext-overflowtext-transformline-heightword-spacingletter-spacingbackgroundи все связанные свойства (background-color,background-imageи т.д.)opacityvertical-align
В основном, это свойства, так или иначе связанные с форматированием текста.
Псевдокласс :placeholder-shown
Кроме псевдоэлемента ::placeholder в стандарте CSS существует еще псевдокласс :placeholder-shown, посмотреть поддержку которого можно также на сайте caniuse.com.
Отличие :placeholder-shown от ::placeholder заключается в том, что оформление с помощью :placeholder-shown работает только тогда, когда в полях input и textarea виден текст заполнителя, т.е. значение атрибута placeholder. Когда пользователь начинает вводить текст, это оформление меняется на стандартное или описанное в стилях для данной страницы/сайта.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style> input, textarea { border: 2px solid black; } input:-moz-placeholder-shown, textarea:-moz-placeholder-shown { border: 2px dotted orange; } input:-ms-input-placeholder-shown, textarea:-ms-input-placeholder-shown{ border: 2px dotted orange; } input:placeholder-shown, textarea:placeholder-shown { border: 2px dotted orange; } </style> <div class="test"> <p><input type="text" name="name" placeholder="Иван Иваныч"></p> <p><input type="email" name="email" placeholder="info@mysite.com"></p> <p><textarea name="msg" placeholder="Сообщение"></textarea></p> </div> |
Посмотрите пример в действии. Для этого нужно набрать какой-либо текст в поле ввода (<input>) или в текстовой области (<textarea>).
Отличный пример использования этого свойства можно продемонстрировать для первоначального скрытия текста метки поля (label), а затем анимированного ее перемещения в конец поля. Т.е. когда мы видим текст из атрибута placeholder, нам текст в label не нужен - поэтому он скрыт (свойство opacity: 0). Как только пользователь начинает вводить текст, заполняя поле, текст из placeholder автоматически пропадает, зато выезжает label и размещается в качестве подсказки в конце поля.
See the Pen Псевдокласс :placeholder-shown by Elen (@ambassador) on CodePen.
Цвет каретки
Теперь можно в CSS задать цвет каретки, т.е. курсора, который мерцает при вводе текста. Для этого нужно использовать свойство caret-color. Поддержка в современных браузерах пока не очень четкая, но последние версии и Firefox, и Chrome, и Safari, и Opera, причем и для ОС Android и iOS уже поддерживают это свойство. Отстает Microsoft Edge и IE и Opera Mini.
В примере ниже вы можете увидеть разницу между черной и синей кареткой.
Псевдоклассы :required и :optional
В HTML появился очень удобный атрибут required для обязательных к заполнению элементов форм. Ему соответству в CSS псевдокласс :required, который позволяет выделить нужным вам образом все обязательные поля. Другой псевдокласс - :optional, напротив, находит любые элементы <input> , у которых не установлен атрибут required. Он позволяет задавать необязательным элементам формы другие стили.
Попробуем на примере использовать псевдоклассы:required и :optional. Выделим разными рамками обязательные и необязательные поля. Кроме того, используем привычную для всех звездочку для указания на обязательное поле, но не в виде текста, а в виде псевдоэлемента ::after для элемента label.
| 1 2 3 4 | .group-field input:required + label::after { content: '*'; color: red; } |
Для использования этого селектора нам понадобилось разместить label после input. Визуально поменяем их местами, назначив родительскому элементу p с классом .group-field свойство display: flex, а вложенному в него элементу input свойство order:1, использовав преимущества разметки с помощью модели Flexbox:
| 1 2 3 4 5 6 7 8 9 10 | .group-field {display: flex;} .group-field input,.group-field select { order: 1; ...; } ------ <p class="group-field"> <input type="text" id="name" required="required"> <label for="name">Имя</label> </p> |
Пример формы с обязательными и необязательными полями:
See the Pen Псевдоклассы :required и :optional by Elen (@ambassador) on CodePen.
Псевдокласс :checked
Все предыдущие свойства относились к оформлению текстовых полей и областей. Однако спецификация не обошла вниманием флажки и переключатели (или радио-кнопки). Как правило, их нужно отмечать или выбирать, т.е. назначать атрибут checked. Поэтому в CSS3 появился псевдокласс :checked. С его помощью мы можем стилизовать выбранные элементы формы.
Рассмотрим такой пример:
See the Pen Псевдокласс :checked by Elen (@ambassador) on CodePen.
При клике на любом флажке или переключателе текст в элементе label, привязанном к нему становится жирным и выделяется другим цветом. И все это за счет работы псевдокласса :checked:
| 1 2 3 4 | input:checked + label { color: #179cb9; font-weight: bold; } |
Поскольку нам нужно отформатировать именно текст в label, здесь использован соседний селектор (input:checked + label). Для того чтобы задать форматирование только для радио-кнопок, можно использовать селектор атрибута:
| 1 2 3 4 | input[type="radio"]:checked+label{ color: #179cb9; font-weight: bold; } |
Интересный пример с :placeholder-shown. Спасибо.