От автора: назначение стилей элементам формы при разработке веб-приложений – настоящая головная боль. Исторически сложилось, что веб-разработчикам приходилось принимать те элементы управления формой, которые предоставлялись браузером, почти без надежды на их модификацию под требования заказчика. Однако веб-браузерные движки, чтобы дать авторам контроль над их отображением, постоянно добавляют обходные варианты – псевдоэлементы.
В то время как все эти псевдоэлементы специфически предназначены для браузерных движков (и, следовательно, необходимы префиксы), они все равно удобны для модифицирования отображения этого движка. Данная статья – моя лучшая попытка составления полного списка псевдоэлементов, имеющихся в Trident’е, Gecko и WebKit’е. На момент написания этой статьи Blink является последней ветвью WebKit’а, так что представленные псевдоэлементы те же самые.
Пара замечаний:
Все перечисленные здесь псевдоэлементы были добавлены в IE10 и не будут работать в более ранних версиях Internet Explorer’а.
В WebKit’е для назначения стилей некоторым псевдоэлементам нужно установить псевдокласс базисного элемента -webkit-appearance на none. Например, чтобы назначить стили ::-webkit-progress-bar вы должны применить -webkit-appearance: none; к соответствующему элементу progress.
Список элементов
Элементы input
button
checkbox / radio
color
date
file
number
password
placeholder attribute
range
reset
search
submit
text
Другие элементы
button
keygen
meter
progress
select
textarea
Смешанные
Form Validation Messages
input[type=button]
Gecko
Смотри button
input[type=checkbox] / input[type=radio]
Trident
Trident предоставляет псевдоэлемент для управления чекбоксами и селективными кнопками ::-ms-check. Например:
|
1 2 |
<input type="checkbox"> <input type="radio"> |
|
1 2 3 4 5 |
::-ms-check { color: red; background: black; padding: 1em; } |
В IE10 на Windows 8 это отображается так:
input[type=color]
WebKit
Webkit обеспечивает выбор цветов двумя псевдоэлементами ::-webkit-color-swatch-wrapper и ::-webkit-color-swatch. К этим элементам применимы многие правила, но я ни с чем полезным не столкнулся. Вот вам пример, просто показать, что это возможно:
|
1 |
<input type="color"> |
|
1 2 |
::-webkit-color-swatch-wrapper { border: 2px solid red; } ::-webkit-color-swatch { opacity: 0.5; } |
В Chrome 26 на OS X это отображается следующим образом:
input[type=date]
WebKit
WebKit сделал доступными следующие восемь псевдоэлементов модифицирования поля ввода даты:
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
Вот внутренняя структура этих элементов:
Так что если вы решили, что вводу даты не помешает больший интервал и интересная цветовая схема, то можете добавить следующее:
|
1 |
<input type="date"> |
|
1 2 3 4 5 6 7 8 |
::-webkit-datetime-edit { padding: 1em; } ::-webkit-datetime-edit-fields-wrapper { background: silver; } ::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; } ::-webkit-datetime-edit-month-field { color: blue; } ::-webkit-datetime-edit-day-field { color: green; } ::-webkit-datetime-edit-year-field { color: purple; } ::-webkit-inner-spin-button { display: none; } ::-webkit-calendar-picker-indicator { background: orange; } |
В Chrome 26 на OS X это отображается так:
input[type=file]
Все браузерные движки при создании input type=»file» автоматически генерируют кнопку. Традиционно эта кнопка совершенно неподвержена назначению стилей. Однако в последнее время Trident и WebKit добавили обходные приемы посредством псевдоэлементов.
Trident
Что касается IE10, кнопке ввода файла стили могут назначаться с помощью псевдоэлемента ::-ms-browse. В основном любые правила CSS, применяемые к обычной кнопке, можно применить к псевдоэлементу. Например:
|
1 |
<input type="file"> |
|
1 2 3 4 5 |
::-ms-browse { background: black; color: red; padding: 1em; } |
В IE10 на Windows 8 это отображается следующим образом:
WebKit
У WebKit’а есть обходной маневр для кнопки файлового ввода – псевдоэлемент ::-webkit-file-upload-button. И снова можно применять почти любое правило CSS, следовательно, пример Trident’а здесь тоже сработает:
|
1 |
<input type="file"> |
|
1 2 3 4 5 |
::-webkit-file-upload-button { background: black; color: red; padding: 1em; } |
В Chrome 26 на OS X это отображается так:
input[type=number]
WebKit
WebKit для полей ввода цифр предоставляет управление вращающимся счетчиком. Предлагаются для модифицирования псевдоэлементы ::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button и ::-webkit-outer-spin-button. Хотя вы и не сможете сделать с их помощью все, что угодно, но они могут пригодиться для того, чтобы скрыть вращающийся счетчик.
|
1 |
<input type="number"> |
|
1 2 3 4 5 6 7 |
::-webkit-textfield-decoration-container { } ::-webkit-inner-spin-button { -webkit-appearance: none; } ::-webkit-outer-spin-button { -webkit-appearance: none; } |
В Chrome 26 на OS X это отображается так:
input[type=password]
Trident
Trident гарантирует управление полями ввода пароля, которые можно нажать для показа пароля как простого текста. Этот элемент управления модифицируется посредством псевдоэлемента ::-ms-reveal. Можно изменить некоторое количество свойств элемента, включая его цвет, фон, показать или скрыть его. Скрыть элемент управления можно так:
|
1 |
<input type="password"> |
|
1 |
::-ms-reveal { display: none; } |
В IE10 на Windows 8 это показывается следующим образом:
Атрибут placeholder
Gecko
У Gecko имеется псевдоэлемент ::-moz-placeholder для назначения стилей тексту-заполнителю. Его можно использовать для изменения цвета заполнителя или свойств его шрифта. Например:
|
1 |
<input placeholder="placeholder"> |
|
1 2 3 4 |
::-moz-placeholder { color: blue; font-family: 'Comic Sans MS'; } |
В Firefox 20 на OS X это выглядит так:
Примечание: В Firefox 19 Gecko переключился с псевдокласса :-moz-placeholder на псевдоэлемент ::-moz-placeholder.
Trident
Trident предоставляет возможность назначить стили тексту-заполнителю при помощи псевдокласса, а не псевдоэлемента. Однако псевдокласс :-ms-input-placeholder можно применять таким же образом, как псевдоэлементы других браузерных движков:
|
1 |
<input placeholder="placeholder"> |
|
1 2 3 4 |
:-ms-input-placeholder { color: blue; font-family: 'Comic Sans MS'; } |
В IE10 на Windows 8 это выглядит так:
WebKit
У WebKit’а есть псевдоэлемент ::-webkit-input-placeholder. Еще с его помощью можно менять цвет и шрифт текста-заполнителя:
|
1 |
<input placeholder="placeholder"> |
|
1 2 3 4 |
::-webkit-input-placeholder { color: blue; font-family: 'Comic Sans MS'; } |
В Chrome 26 на OS X это отображается следующим образом:
input[type=range]
Gecko
Что касается Firefox 22, для назначения стилей input type=»range» Gecko предоставляет псевдоэлементы ::-moz-range-track и ::-moz-range-thumb. К этим элементам можно применять большинство правил CSS, например:
|
1 |
<input type="range"> |
|
1 2 3 4 5 6 7 8 9 |
::-moz-range-track { border: 2px solid red; height: 20px; background: orange; } ::-moz-range-thumb { background: blue; height: 30px; } |
В Firefox 22 на OS X это выглядит так:
Trident
Trident гарантирует впечатляющее количество псевдоэлементов для модифицирования своего диапазонного селектора.
::-ms-fill-lower: Часть дорожки под/перед манипулятором.
::ms-fill-upper: Часть дорожки над/после манипулятора.
::-ms-ticks-before: Область над/перед дорожкой-диапазоном с делениями шкалы.
::-ms-ticks-after: Область под/после дорожки-диапазона с делениями шкалы.
::-ms-thumb: Манипулятор.
::-ms-track: Сама дорожка-диапазон.
::ms-tooltip: Подсказка, всплывающая, когда пользователь выбирает с помощью диапазонного селектора значение. Обратите внимание, что этому элементу нельзя назначать стили, его можно только скрыть с помощью display: none.
Легче всего это представить с помощью примера. Возьмите следующее:
|
1 |
<input type="range"> |
|
1 2 3 4 5 6 7 |
::-ms-fill-lower { background: orange; } ::-ms-fill-upper { background: green; } ::-ms-thumb { background: red; } ::-ms-ticks-after { display: block; color: blue; } ::-ms-ticks-before { display: block; color: black; } ::-ms-track { padding: 20px 0; } ::-ms-tooltip { display: none; /* display and visibility only */ } |
В IE10 на Windows 8 это будет смотреться так:
WebKit
У WebKit’а имеется псевдоэлемент ::-webkit-slider-runnable-track для дорожки и ::-webkit-slider-thumb для самого манипулятора. С этими элементами многого не сделаешь, но можно добавить цвета и отступ.
|
1 |
<input type="range"> |
|
1 2 3 4 5 6 7 8 |
::-webkit-slider-runnable-track { border: 2px solid red; background: green; padding: 2em 0; } ::-webkit-slider-thumb { outline: 2px solid blue; } |
В Chrome 26 на OS X это выглядит так:
Последнее замечание. К псевдоэлементу бегунка Trident и Webkit дают вам возможность применить состояния проведения мышью (соответственно ::-webkit-slider-thumb:hover и ::-ms-thumb:hover), тогда как Gecko в данное время этого не делает.
input[type=reset]
Gecko
смотри button
input[type=search]
WebKit
По умолчанию WebKit предоставляет пользовательский интерфейс ввода поиска с кнопками отмены «cancel» и поиска «search». Для модифицирования существует два псевдоэлемента ::-webkit-search-cancel-button и ::-webkit-search-results-button, хотя с ними особо ничего не сделаешь, кроме как скрыть их, как показано внизу:
|
1 |
<input type="search"> |
|
1 2 3 4 5 6 7 8 |
/* Удалить закругленные углы */ input[type=search] { -webkit-appearance: none; } /* Скрыть кнопку отмены «cancel» */ ::-webkit-search-cancel-button { -webkit-appearance: none; } /* Скрыть лупу */ ::-webkit-search-results-button { -webkit-appearance: none; } |
В Chrome 26 на OS X это смотрится таким образом:
input[type=submit]
Gecko
Смотри button
input[type=text]
Trident
Что касается IE10, у Trident’а имеется псевдоэлемент ::-ms-value для назначения стилей значениям value текстовых input-ов. (input[type=text], input[type=password] и т.д.) и select’ов. Например:
|
1 2 3 |
<input type="text" value="value"> <input type="password" value="value"> <select><option selected>option</option></select> |
|
1 2 3 4 5 |
::-ms-value { color: red; background: black; padding: 1em; } |
В IE10 на Windows 8 выглядит так:
Элемент очистки clear
В IE10, когда текстовый input находится в фокусе и не пустой, в правой стороне ввода появляется маленький элемент управления X. Будучи нажатым, он очищает содержимое текстового поля. Этому X можно назначать стили с помощью псевдоэлемента ::-ms-clear. Следовательно, его можно скрыть:
|
1 |
<input type="text"> |
|
1 |
::-ms-clear { display: none; } |
Так это выглядит в IE10 на Windows 8:
::-ms-clear принимает большое количество правил, так что ему также можно назначать тему:
|
1 |
<input type="text" value="Lorem Ipsum"> |
|
1 2 3 4 5 |
::-ms-clear { color: red; background: black; padding: 1em; } |
Это будет смотреться так:
Элемент button
Gecko
К input-ам типа button, reset и submit Gecko применяет псевдоэлементы ::-moz-focus-outer и ::-moz-focus-inner, а также элементы button. С этими псевдоэлементами много каши не сваришь, но одну важную вещь нужно знать. Gecko по умолчанию применяет padding и border к ::-moz-focus-inner:
|
1 2 3 4 5 6 7 8 |
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: 1px dotted transparent; padding: 0 2px; } |
Эти правила с легкостью создают различие отображения кнопок в Gecko и других браузерных движках. Это сбивает с толку, и на самом деле для его удаления есть тикет. Он открыт с 2002г., так что не задерживайте дыхание. Отступ и рамку по умолчанию можно изменить, просто установив их на 0:
|
1 2 3 4 5 |
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } |
До и после этого действия можно видеть на скриншоте Firefox 19 на OS X (ниже):
Элемент keygen
WebKit
WebKit предоставляет ::-webkit-keygen-select, который можно применять для модифицирования выпадающего меню, используемого элементом генератора ключей. Например:
|
1 |
<keygen> |
|
1 2 3 4 |
::-webkit-keygen-select { background: black; color: red; } |
В Chrome 26 на OS X это будет смотреться так:
Элемент meter
WebKit
У WebKit’а имеются псевдоэлементы ::-webkit-meter-bar, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value и ::-webkit-meter-suboptimal-value для модифицирования отображения элементов счетчика.
Для назначения стилей псевдоэлементам вам нужно установить -webkit-appearance на none в самом элементе meter.
Активен будет только один из элементов ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value и ::-webkit-meter-suboptimal-value в заданное время в зависимости от значения meter.
Смотрите на примере:
|
1 2 3 |
<meter low="69" high="80" max="100" optimum="100" value="92">A</meter> <meter low="69" high="80" max="100" optimum="100" value="72">C</meter> <meter low="69" high="80" max="100" optimum="100" value="52">E</meter> |
|
1 2 3 4 5 6 7 8 9 |
meter { -webkit-appearance: none; } ::-webkit-meter-bar { height: 50px; background: white; border: 2px solid black; } ::-webkit-meter-optimum-value { background: green; } ::-webkit-meter-suboptimum-value { background: orange; } ::-webkit-meter-even-less-good-value { background: blue; } |
В Chrome 26 на OS X будет выглядеть так:
Элемент progress
WebKit
Для назначения стилей элементам индикаторов выполненияWebKit предоставляет псевдоэлементы ::-webkit-progress-inner-element, ::-webkit-progress-bar и ::-webkit-progress-value в следующей иерархии:
Как в случае со счетчиком meter, для того, чтобы применить какие-либо правила к этим элементам, нужно установить -webkit-appearance: none; к элементу индикатора выполнения. Вот пример:
|
1 |
<progress max="100" value="50"></progress> |
|
1 2 3 4 |
progress { -webkit-appearance: none; } ::-webkit-progress-inner-element { } ::-webkit-progress-bar { border: 2px solid black; } ::-webkit-progress-value { background: red; } |
Выглядит в Chrome 26 на OS X так:
Gecko
Gecko предоставляет псевдоэлемент ::-moz-progress-bar для стилей самого индикатора. Например:
|
1 |
<progress max="100" value="50"></progress> |
|
1 |
::-moz-progress-bar { background: red; } |
Выглядит в Firefox 19 на OS X так:
Trident
Как у Gecko, у Trident’а есть единственный псевдоэлемент для назначения стилей индикатора выполнения, ::-ms-fill. Например:
|
1 |
<progress max="100" value="50"></progress> |
|
1 |
::-ms-fill { background: red; } |
В IE10 на Windows 8 выглядит так:
Элемент select
Trident
Что касается IE10, у Trident ‘а есть для вас обходной метод назначения стилей стрелке-указателю внутри выпадающих списков ::-ms-expand. Например:
|
1 2 3 |
<select> <option selected>One</option> </select> |
|
1 2 3 4 5 |
::-ms-expand { padding: 2em; color: red; background: black; } |
В IE10 на Windows 8 отображается следующим образом
Элемент textarea
WebKit
У WebKit’а имеется псевдоэлемент ::-webkit-resizer для элемента управления изменением размера – он автоматически добавляется внизу справа от элементов textarea. Его можно скрыть, применив display: none или -webkit-appearance: none:
|
1 |
<textarea></textarea> |
|
1 2 3 |
::-webkit-resizer { display: none; } |
В Chrome 26 на OS X смотрится так:
Примечание: Добавление display: none в ::-webkit-resizer в действительности не предотвращает изменение текстовой области пользователем, оно просто скрывает элемент управления. Если хотите отключить изменение размера, установите свойство resize CSS на none. Это также скрывает элемент управления, и вдобавок работает во всех браузерах, поддерживающих изменение размера текстовых областей.
Псевдоэлемент ::-webkit-resizer также позволяет выполнять назначение основных стилей. Если вам кажется, что элементу управления изменением размера значительно не хватает цвета, можно добавить следующее:
|
1 |
<textarea></textarea> |
|
1 2 3 4 5 6 |
::-webkit-resizer { border: 2px solid black; background: red; box-shadow: 0 0 5px 5px blue; outline: 2px solid yellow; } |
В Chrome 26 на OS X выглядит так:
Сообщения о валидации формы
WebKit
WebKit – единственный браузерный движок, поддерживающий назначение стилей «облачкам» с сообщениями о валидации, созданным из валидации ограничений API. У нее есть следующие псевдоэлементы:
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-heading
::-webkit-validation-bubble-message
::-webkit-validation-bubble-text-block
Лучше увидеть их действие собственными глазами. Вот пример:
|
1 2 3 4 5 6 |
::-webkit-validation-bubble { padding: 1em; background: orange; } ::-webkit-validation-bubble-arrow { background: blue; } ::-webkit-validation-bubble-arrow-clipper { border: 2px solid black; } ::-webkit-validation-bubble-heading { background: green; } ::-webkit-validation-bubble-message { color: white; background: purple; } ::-webkit-validation-bubble-text-block { border: 1px solid red; padding: 1em; } |
В Chrome 26 на OS X это будет выглядеть следующим образом:
Вот чуть более практичный пример, показывающий, как можно назначить тему «облачку» с сообщением:
|
1 2 3 4 5 6 7 8 9 |
::-webkit-validation-bubble-message { color: #eee; background: black; } ::-webkit-validation-bubble-arrow { background: black; border-color: #444; box-shadow: none; } |
В Chrome 26 на OS X это выглядит так:
Вот и все!
Надеюсь, этот список окажется вам полезным. Если я пропустил какие-то элементы, или некая информация уже устарела, дайте мне знать об этом в комментариях.
Автор: TJ VanToll
Источник: //tjvantoll.com/
Редакция: Команда webformyself.
