Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Кастомное оформление checkbox и radio кнопок средствами CSS

Дата:19.10.15 в 12:18
Раздел: 

Кастомизация checkbox и radio

Знакомство с 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 кода и дефолтных полей считается невозможным.

Оценок: 6 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)