Знакомство с checkbox и radio
Для раскрытия основной темы этой статьи в первую очередь следует раскрыть понятие checkbox и radio для понимания того, с чем нам надо будет столкнуться при кастомизации.
Checkbox — составляющая часть интерфейса веб-ресурса, вывод которой осуществляется графическим методом. Существует два возможных состояния элемента: выбрано (означает согласие с указанным тезисом или подтверждает предпочтение пользователя к указанному объекту) и не выбрано (передает не согласие и не желание взаимодействия человека с указанными параметрами).
Область взаимодействия пользователя и checkbox традиционно представляется в виде пустого квадрата. При выборе указанного параметра (средством выбора является клик мышкой по активной зоне) квадратик заполняется определенным маркером. Классический вариант этого маркера — галочка. Около флажка указывается информация для выбора, в ее качестве может выступать текст, реже — картинка.
Radio - составляющая часть интерфейса веб-ресурса, которая передает выбор пользователя одного значения из общего множества предложенных вариантов.
По сути функционал radio не отличается от checkbox. Единственным и главным отличием этих элементов является то, что checkbox позволяет выбрать несколько параметров одновременно из списка предложенных, а radio допускает отмечать только один вариант.
Процесс кастомизации
Суть кастомизации заключается в преобразовании указанного оформления под свой уникальный стиль. Для не опытных верстальщиков этот процесс вызывает множество вопросов и трудностей. Однако сегодня мы покажем, как грамотно переоформить элементы выбора checkbox и radio без использования Java-script кода.
Необходимость в использовании кастомизации переключателей и флажков вызвана с одной стороны особенностями работы браузеров, которые по умолчанию отображают эти элементы по разному, в соответствии со своими стандартными настройкам. Пример отображение одного и того же кода в Chrome и FireFox представлен ниже.
До кастомизации
После кастомизации
С другой стороны это используется для создания единства стиля сайта, приведения всего оформления ресурса к общему знаменателю.
Пример переработки стандартного оформления в необходимый Вам вид рассмотрен ниже.
HTML
<input type="checkbox" id="test-check1" /> <label for="test-check1">Чекбокс 1:</label>
CSS
input[type=checkbox] { position: absolute; clip: rect(0, 0, 0, 0); } label { cursor: pointer; } label:after { content: " "; display: inline-block; width: 17px; height: 17px; background: url(img/checkbox-2.png); position: relative; top: 3px; margin-left: 15px; } input[type=checkbox]:checked + label:after { background-position: 0 -17px; } label:hover:after { background-position: 0 -34px; } input[type=checkbox]:checked + label:hover:after { background-position: 0 -51px; }
В каких браузерах работает?
| 9.0+ | 1.0+ | 11.6+ | 5.0+ | 4.0+ | 4.0+ | ? |
Для остальных версий браузера кастомизация без Java-script кода и дефолтных полей считается невозможным.
