Список псевдоэлементов для оформления форм

Список псевдоэлементов для оформления форм

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

В то время как все эти псевдоэлементы специфически предназначены для браузерных движков (и, следовательно, необходимы префиксы), они все равно удобны для модифицирования отображения этого движка. Данная статья – моя лучшая попытка составления полного списка псевдоэлементов, имеющихся в 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. Например:

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

В IE10 на Windows 8 это отображается так:

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

Вот внутренняя структура этих элементов:

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

<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 на OS X это отображается так:

input[type=file]

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

Trident

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

<input type="file">
::-ms-browse {
    background: black;
    color: red;
    padding: 1em;
}

В IE10 на Windows 8 это отображается следующим образом:

WebKit

У WebKit’а есть обходной маневр для кнопки файлового ввода – псевдоэлемент ::-webkit-file-upload-button. И снова можно применять почти любое правило CSS, следовательно, пример Trident’а здесь тоже сработает:

<input type="file">
::-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. Хотя вы и не сможете сделать с их помощью все, что угодно, но они могут пригодиться для того, чтобы скрыть вращающийся счетчик.

<input type="number">
::-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. Можно изменить некоторое количество свойств элемента, включая его цвет, фон, показать или скрыть его. Скрыть элемент управления можно так:

<input type="password">
::-ms-reveal { display: none; }

В IE10 на Windows 8 это показывается следующим образом:

Атрибут placeholder

Gecko

У Gecko имеется псевдоэлемент ::-moz-placeholder для назначения стилей тексту-заполнителю. Его можно использовать для изменения цвета заполнителя или свойств его шрифта. Например:

<input placeholder="placeholder">
::-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 можно применять таким же образом, как псевдоэлементы других браузерных движков:

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

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

WebKit

У WebKit’а есть псевдоэлемент ::-webkit-input-placeholder. Еще с его помощью можно менять цвет и шрифт текста-заполнителя:

<input placeholder="placeholder">
::-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, например:

<input type="range">
::-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.

Легче всего это представить с помощью примера. Возьмите следующее:

<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; /* display and visibility only */ }

В IE10 на Windows 8 это будет смотреться так:

WebKit

У WebKit’а имеется псевдоэлемент ::-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 на 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, хотя с ними особо ничего не сделаешь, кроме как скрыть их, как показано внизу:

<input type="search">
/* Удалить закругленные углы */
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’ов. Например:

<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 выглядит так:

Элемент очистки clear

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

<input type="text">
::-ms-clear { display: none; }

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

::-ms-clear принимает большое количество правил, так что ему также можно назначать тему:

<input type="text" value="Lorem Ipsum">
::-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:

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:

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

До и после этого действия можно видеть на скриншоте Firefox 19 на OS X (ниже):

Элемент keygen

WebKit

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

<keygen>
::-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.
Смотрите на примере:

<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 на OS X будет выглядеть так:

Элемент progress

WebKit

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

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

<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 так:

Gecko

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

<progress max="100" value="50"></progress>
::-moz-progress-bar { background: red; }

Выглядит в Firefox 19 на OS X так:

Trident

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

<progress max="100" value="50"></progress>
::-ms-fill { background: red; }

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

Элемент select

Trident

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

<select>
    <option selected>One</option>
</select>
::-ms-expand {
    padding: 2em;
    color: red;
    background: black;
}

В IE10 на Windows 8 отображается следующим образом

Элемент textarea

WebKit

У WebKit’а имеется псевдоэлемент ::-webkit-resizer для элемента управления изменением размера – он автоматически добавляется внизу справа от элементов textarea. Его можно скрыть, применив display: none или -webkit-appearance: none:

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

В Chrome 26 на OS X смотрится так:

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

Псевдоэлемент ::-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 на 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

Лучше увидеть их действие собственными глазами. Вот пример:

::-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 это будет выглядеть следующим образом:

Вот чуть более практичный пример, показывающий, как можно назначить тему «облачку» с сообщением:

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

Источник: http://tjvantoll.com/

Редакция: Команда webformyself.

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

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

Я не робот.

Spam Protection by WP-SpamFree