Список псевдоэлементов для стилизации элементов управления формы

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

Несмотря на то, что все эти псевдоэлементы специфичны для каждого браузерного движка (и поэтому требуют браузерных префиксов), они всё равно могут быть полезными для кастомизации отображения в каждом из них. Эта статья – моя лучшая попытка составить полный список псевдоэлементов, доступных в движках Trident, Gecko, и WebKit. На момент написания этой статьи движок Blink с недавних пор является ответвлением WebKit, так что псевдоэлементы в них идентичны. Я не в курсе на счёт псевдоэлементов, которые поддерживает Presto.

Пара замечаний:

  • Все описанные здесь псевдоэлементы для движка Trident были добавлены в IE10 и не работают в более ранних версиях Internet Explorer.
  • Чтобы стилизовать некоторые псевдоэлементы движка WebKit, должны установить самим элементам псевдокласс -webkit-appearance со значением «none«. например, чтобы застилизовать ::-webkit-progress-bar, вы должны применить -webkit-appearance: none; к соответствующему элементу <progress>

Содержание

input[type=button]

Gecko

Смотрите <button>

input[type=checkbox] / input[type=radio]

Trident

Trident предоставляет псевдоэлемент ::-ms-check для чекбоксов и радиокнопок. Например:

<input type="checkbox">
<input type="radio">
::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Вот как это будет выглядеть в браузере IE10 в Windows 8:

trident-radio-checkbox

input[type=color]

WebKit

Webkit предоставляет два псевдоэлемента для своей палитры цвета, ::-webkit-color-swatch-wrapper и ::-webkit-color-swatch. Вы можете добавить разные правила для этих элементов, но мне ещё не удалось выдумать что-нибудь полезное. В примере ниже показывается просто, что это возможно.

<input type="color">

::-webkit-color-swatch-wrapper { border: 2px solid red; }
::-webkit-color-swatch { opacity: 0.5; }

Вот как это выглядит в Chrome 26 на Mac OS X.

webkit-input-color

input[type=date]

WebKit

Следующие восемь псевдоэлементов доступны в WebKit для кастомизации текстовых полей в input’ах предназначенных для установки даты.

  • ::-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

Здесь изображена внутренняя структура этих элементов:

webkit-input-date-shadow

Так что, если вы считаете, что хорошо бы задать полю даты воздуха побольше и весёленькие цвета, то вы можете добавить следующие объявления:

<input type="date">
::-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 и на OС X:

webkit-input-date

input[type=file]

Все браузерные движки автоматически генерируют кнопку, когда мы создаём <input type=»file»>. Исторически, эта кнопка была совершенно нестилизуемой. Однако, недавно Trident and WebKit добавили некоторые зацепки через псевдоэлементы.

Trident

Что касается IE10 кнопка input-file может быть застилизована при помощи псевдоэлемента ::-ms-browse. В основном все CSS-правила, которые вы добавляете к обычной кнопке, могут быть добавлены в псевдоэлементе.

<input type="file">

::-ms-browse {
    background: black;
    color: red;
    padding: 1em;
}

Вот как это выглядит в браузере IE10 в Windows 8:

trident-input-file

WebKit

WebKit обеспечивает зацепку для его кнопки input-file c помощью псевдоэлемента ::-webkit-file-upload-button. Снова почти любое правило может быть применено, поэтому пример для Trident здесь тоже будет работать.

Вот как это будет выглядеть в браузере Chrome 26 и на OС X:

input[type=number]

WebKit

По умолчанию WebKit предоставляет для числовых полей кнопки «увеличить» и «уменьшить». Псевдоэлементы ::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button and ::-webkit-outer-spin-button нужны для кастомизации. Хотя вы не можете делать массу вещей с этими элементами, тем не менее, может быть полезно скрыть эти кнопки.

<input type="number">

::-webkit-textfield-decoration-container { }
::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

Вот как это будет выглядеть в браузере Chrome 26 и на OС X:

webkit-input-number

input[type=password]

Trident

Trident предоставляет элемент управления, который можно нажать, чтобы отобразить пароль в виде простого текста. Эта возможность настраивается с помощью псевдоэлемента ::-ms-reveal. Вы можете добавить для управления отобразить пароль и такие свойства, как: color, background, или display, чтобы скрыть кнопку «отобразить пароль».

<input type="password">

::-ms-reveal { display: none; }

Вот как это выглядит в браузере IE10 в Windows 8:

trident-input-password

placeholder Attribute

Gecko

Gecko предоставляет псевдоэлемент ::-moz-placeholder, чтобы стилизовать текст в плейсхолдере. Вы можете использовать этот псевдоэлемент, чтобы изменять цвет и свойства шрифта в плейсхолдере. Например:

<input placeholder="placeholder">

::-moz-placeholder {
    color: blue;
    font-family: 'Comic Sans MS';
}

Вот как это выглядит в браузере Firefox 20 на OС X:

gecko-placeholder

Примечание: Gecko сменил псевдокласс :-moz-placeholder на псевдоэлемент ::-moz-placeholder в Firefox 19.

Trident

Trident предлагает стилизовать текст плейсхолдера через псевдокласс, а не через псевдоэлемент. Однако, псевдокласс :-ms-input-placeholder имеет такие же возможности, как и псевдоэлементы из других браузерных движков:

<input placeholder="placeholder">

:-ms-input-placeholder {
    color: blue;
    font-family: 'Comic Sans MS';
}

Вот как это выглядит в браузере IE10 в Windows 8:

trident-placeholder

WebKit

WebKit предоставляет псевдоэлемент ::-webkit-input-placeholder. Так же он может быть использован, чтобы изменять цвет и шрифт текста плейсхолдера:

<input placeholder="placeholder">

::-webkit-input-placeholder {
    color: blue;
    font-family: 'Comic Sans MS';
}

Вот как это будет выглядеть в браузере Chrome 26 и на OС X:

webkit-placeholder

input[type=range]

Gecko

Начиная с Firefox 22, Gecko предлагает псевдоэлементы ::-moz-range-track и ::-moz-range-thumb для стилизации input’ов-ползунков. К этим элементам можно применить большинство CSS-правил. Например:

<input type="range">

::-moz-range-track {
    border: 2px solid red;
    height: 20px;
    background: orange;
}
::-moz-range-thumb {
    background: blue;
    height: 30px;
}

Вот как это выглядит в браузере Firefox 22 и на OС X:

gecko-input-range

Trident

Trident предоставляет впечатляющее количество псевдоэлементов для кастомизации его ползунка выбора значения из диапазона.

  • ::-ms-fill-lower: часть полоски, по которой ездит ползунок, под/перед самим ползунком.
  • ::-ms-fill-upper: Часть полоски, по которой ездит ползунок, над/после самого ползунка.
  • ::-ms-ticks-before: Область над/перед полоской ползунка с делениями.
  • ::-ms-ticks-after: Область под/после полоски ползунка с делениями.
  • ::-ms-thumb: Сам ползунок
  • ::-ms-track: Полоска ползунка
  • ::ms-tooltip: Всплывающая подсказка, которая появляется во время того, как пользователь выбирает значение в селекторе ползунка. Заметьте, что этот элемент не может быть стилизован, а только скрыт при помощи display: none. :)

Легче изобразить это на примере. Держите:

<input type="range">

::-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; /* только показать и скрыть */ }

Именно так это будет выглядеть в браузере IE10 в Windows 8:

trident-input-range

WebKit

WebKit предоставляет псевдоэлемент the ::-webkit-slider-runnable-track для полоски и ::-webkit-slider-thumb для самого ползунка. Хотя с ним и мало что можно сделать, но вы можете добавить цвета и отступы:

<input type="range">

::-webkit-slider-runnable-track {
    border: 2px solid red;
    background: green;
    padding: 2em 0;
}
::-webkit-slider-thumb {
    outline: 2px solid blue;
}

Вот так это выглядит в Chrome 26 на ОС Х:

webkit-input-range

И последнее замечание об input’ах-ползунках. Trident и Webkit позволяют менять вид самого ползунка при наведении с помощью псевдоэлементов (::-webkit-slider-thumb:hover и ::-ms-thumb:hover соответственно). Gecko в настоящий момент не может похвастаться такой возможностью.

input[type=reset]

Gecko

Смотрите <button>

WebKit

По умолчанию WebKit предоставляет специальный пользовательский интерфейс для полей поиска с кнопками отмены и поиска. Для кастомизации этих полей требуется два псевдоэлемента: :-webkit-search-cancel-button and ::-webkit-search-results-button. К сожалению, мы не можем делать с этими элементами ничего особенного кроме как скрыть их, как показано ниже:

<input type="search">


/* Удалить круглые углы */
input[type=search] { -webkit-appearance: none; }

/* Скрыть кнопку отмены */
::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Скрыть лупу */
::-webkit-search-results-button { -webkit-appearance: none; }

Вот так это выглядит в Chrome 26 на ОС Х:

webkit-input-search

input[type=submit]

Gecko

Смотрите <button>

input[type=text]

Trident

Что касается IE10 – Trident предоставляет псевдоэлемент ::-ms-value для стилизации вводимых символов в текстовых полях (input[type=text], input[type=password], и т.д.) а так же <select>’ов. Например:

<input type="text" value="value">
<input type="password" value="value">
<select><option selected>option</option></select>

::-ms-value {
    color: red;
    background: black;
    padding: 1em;
}

Вот так это выглядит в IE10 в Windows 8:

trident-value

Управление удалением введенных символов

В IE10, когда текстовое поле получает фокус и при этом оно не пустое, то в этом случае в правом углу поля появляется маленький крестик управления. При нажатии на этот крестик содержимое текстового поля очищается. Сам крестик (Х) стилизуется с помощью псевдоэлемента ::-ms-clear. Поэтому можно скрыть его:

<input type="text">

::-ms-clear { display: none; }

Вот так это выглядит в IE10 в Windows 8:

trident-input-clear

Псевдоэлемент ::-ms-clear может принимать различные правила, поэтому можно делать даже так:

<input type="text" value="Lorem Ipsum">

::-ms-clear {
    color: red;
    background: black;
    padding: 1em;
}

Вот что выйдет в итоге:

trident-input-clear-fancy

Элемент <button>

Gecko

Gecko применяет псевдоэлементы ::-moz-focus-outer и ::-moz-focus-inner для input-ов, значение атрибута type которых является button, reset, и submit, а так же к элементам <button>.

С этими псевдоэлементами мало что можно делать, но одну важную вещь о них знать надо. Gecko применяет padding и border к ::-moz-focus-inner по умолчанию:

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-го года, так что не надейтесь понапрасну.

По умолчанию padding и border можно сбросить, просто установив их в 0:

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Результат до установки этих правил и после, можно увидеть на скриншоте (ниже) в Firefox 19 на OС X:

gecko-buttons

<keygen> Element

WebKit

WebKit предоставляет псевдоэлемент ::-webkit-keygen-select, который может быть использован для кастомизации выпадающего списка, который использует элемент <keygen>. Например:

<keygen>
::-webkit-keygen-select {
    background: black;
    color: red;
}

Вот так это выглядит в Chrome 26 в ОС Х:

webkit-keygen

<meter> Element

WebKit предоставляет псевлоэлементы ::-webkit-meter-bar, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, и ::-webkit-meter-suboptimal-value для кастомизации отображения элемента <meter>.

Для того чтобы псевдоэлементы могли применять стили, вы должны установить свойство -webkit-appearance в значение none на самом элементе <meter>.

Только один из псевдоэлементов ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, and ::-webkit-meter-suboptimal-value Только один из псевдоэлементов, в зависимости от значения атрибута «value» элемента <meter>.

Взгляните на следующий пример:

<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>

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 в ОС Х:

webkit-meter

<progress> Element

WebKit

WebKit предоставляет псевдоэлементы ::-webkit-progress-inner-element, ::-webkit-progress-bar и ::-webkit-progress-value, чтобы стилизовать элементы progress, в соответствии со следующей структурой:

webkit-progress-shadow

Как и в случае meter, для стилизации этих элементов вам нужно задать -webkit-appearance: none; для элемента progress. Вот пример:

<progress max="100" value="50"></progress>

progress { -webkit-appearance: none; }
::-webkit-progress-inner-element { }
::-webkit-progress-bar { border: 2px solid black; }
::-webkit-progress-value { background: red; }

Так это выглядит в Chrome 26 на OS X:

webkit-progress

Gecko

Gecko предоставляет псевдоэлемент ::-moz-progress-bar для стилизации самого прогрессбара. Например:

<progress max="100" value="50"></progress>

::-moz-progress-bar { background: red; }

Так это отобразится в Firefox 19 на OS X:

gecko-progress

Trident

Как и Gecko, Trident предоставляет единственный псевдоэлемент для стилизации прогрессбара, ::-ms-fill. Например:

<progress max="100" value="50"></progress>

::-ms-fill { background: red; }

Вот как это выглядит в IE10 на Windows 8:

trident-progress

<select> Element

Trident

Начиная с IE10, Trident дает инструмент стилизации стрелки у выпадающих списков, ::-ms-expand. Например:

<select>
    <option selected>One</option>
</select>

::-ms-expand {
    padding: 2em;
    color: red;
    background: black;
}

Вот как это выглядит в IE10 на Windows 8:

trident-select

<textarea> Element

WebKit

WebKit предоставляет псевдоэлемент ::-webkit-resizer для стрелки изменения размера, которую он автоматически добавляет в правый нижний угол элементов textarea.

Ее можно скрыть с помощью display: none или -webkit-appearance: none:

<textarea></textarea>
::-webkit-resizer {
    display: none;
}

Вот так это выглядит в Chrome 26 в ОС Х:

webkit-textarea-hide

Замечание: добавление display: none к ::-webkit-resizer не препятствует пользователю изменять размер textarea, а только скрывает стрелку. Если вы хотите запретить изменение размера, задайте CSS-свойству resize значение none. Это тоже убирает стрелку и обладает тем преимуществом, что работает во всех браузерах, поддерживающих растягивание textarea.

Псевдоэлемент ::-webkit-resizer также поддается некоторой основной стилизации. Если вам хочется, чтобы стрелка была более цветной, вы можете добавить это:

<textarea></textarea>
::-webkit-resizer {
    border: 2px solid black;
    background: red;
    box-shadow: 0 0 5px 5px blue;
    outline: 2px solid yellow;
}

Вот как это выглядит Chrome 26 на OС X:

webkit-textarea-style

Всплывающие сообщения валидации формы

WebKit

Обновлено: Chrome 28 больше не поддерживает эти псевдоэлементы.

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

Проще наглядно увидеть, что делает каждый элемент. Вот пример:

::-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 on OС X:

webkit-validation-bubble

А вот немного более практичный пример, показывающий как можно стилизовать сообщение валидации под свою тему оформления:

::-webkit-validation-bubble-message {
    color: #eee;
    background: black;
}
::-webkit-validation-bubble-arrow {
    background: black;
    border-color: #444;
    box-shadow: none;
}

Вот как это выглядит Chrome 26 on OС X:

webkit-validation-bubble-pretty

Вот и всё!

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

Источники

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

7 Комментарии

  1. Alinaki

    Пользоваться половиной описанного — жуткий моветон. Всё вышеописанное только доказывает, что с формами всё по-прежнему так же плохо.

    1. Максим Усачев (Автор записи)

      На самом деле очень плохо, что никто не пытается это стандартизировать и в итоге браузеры отсебятничают, а мы получаем по десять разных псевдоэлемнтов, предназначенных для одного и того же, но для разных браузерных движков:(

    2. SelenIT

      Автор статьи с первой фразы соглашается, что со стилизацией форм всё плохо. Но для компромисса между идеалом дизайнера и суровой реальностью браузеров хоть какие-то средства лучше, чем никаких. И подробный справочник таких средств в одном месте в любом случае лишним не будет.

      Будем надеяться, что в будущем (очевидно, не ближайшем, но как минимум обозримом) эта дикая эпоха браузерно-префикснутых отсебятин уступит место чему-то более надежному. На мой взгляд, логично бы стандартизировать внутреннюю структуру этих контролов в виде веб-компонентов и при необходимости добираться до этой структуры селекторами для теневой DOM (в Вебките/Блинке это уже реально).

  2. Мимо проходил

    Ее можно скрыть с помощью display: none или -webkit-appearance: none:

    Для этого обычно используют  resize:none; , что поддерживается многими браузерами.

    1. SelenIT

      Абсолютно верно, и в статье сказано об этом в замечании чуть ниже). Но это меняет поведение, а статья в основном рассказывает о возможностях изменить только внешний вид контролов. Конечно, убирать стрелку, не отменяя ресайза, кажется странным, но… вдруг где-нибудь по дизайну потребуется заменить ее каким-то навороченным рисунком? Не делать же ради этого свой ресайз скриптом?

  3. Alex

    В тех элементах где вводить с клавиатуры не предполагается (аплоад, выбор даты), прячем сам элемент размером 0.1px + кое-что еще и затем стилизуем его лабел как вздумается…

    1. SelenIT

      Неплохой способ! Только обрабатывать состояния (:focus, :valid и т.п.) чуть сложнее, и за этим приходится следить самому.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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