Красивые Radio Buttons (radio кнопка) и Checkbox CSS (чекбокс)

Вам интересно узнать, как можно изменить стили флажков (checkbox css) и переключателей (radio кнопка), без JavaScript? Благодаря CSS3 это возможно!

Шаг 1: Общие сведения

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

Теперь, для тех, кто имеет не очень глубокие знания в это направлении – не бойтесь, читайте далее!

Что же мы будем делать? Используем  CSS3 псевдо селектор  :checked, выполняем проверку вкл/выкл. Затем мы можем использовать “+” смежный селектор от CSS 2.1  сразу после checkbox флажка или радио кнопки, которое в нашем случае это label.

Шаг 2: Настройка нашего HTML кода

Мы начнем с создания HTML и CSS файлов (Вы же можете использовать свои стили, исходя из дизайна Вашего сайта). В данной статье будет продемонстрировано только создание чекбокса, так как радио кнопка имеет такой же принцип её стилизации и также есть в исходнике.

Хорошо, давайте начинать? А начнем мы с создания наших чекбокс input, после чего перейдем к label.

Теперь, только в случае, если вы не знаете много о , Вы должны подключить input и label для того, чтобы вам манипулировать тегом input через label. Это можно сделать, используя for=”" и id=”".

Я также добавлю внутри label, но это более личное предпочтение, но далее Вы поймете зачем он нужен.

Шаг 3: CSS стили

Именно здесь начинается самое интересное. Первое, что необходимо сделать – это скрыть стандартный чекбокс флажок (и это является основой данной статьи). Стили checkbox.

Теперь, когда это сделано, мы можем стилизовать label, но более конкретно span внутри label. Я делаю это таким образом, чтобы сделать положение флажка более точным. Без нее вы бы, вероятно, использовали фоновое изображение для label непосредственно, но таким способом точно его позиционировать сложно.

Позвольте мне коротко объяснить это. Прежде всего, обратите внимание на фон. У меня есть маленький спрайт, так что все, что нужно сделать, это установить фон позиции по span.

Вот остальная часть CSS, специфичные для моего стиля. Это чисто для эстетики.

Шаг 4: Как заставить это работать?

Так, осталось совсем немного . Последнее, что нужно сделать, это определить состоянии элемента при входе, и, возможно, также при наведении курсора мыши. Это довольно просто!

Обратите внимание, что, поскольку я использовал спрайт листа, все, что мне нужно сделать, это изменить позиционирование фона.

Поддержка браузеров

Псевдо-селекторы поддерживаются во всех браузерах, кроме IE – он не поддерживает. Вы не использовать :checked в IE9 и ниже, но его использование более практично.

Поддерживают ли мобильные браузеры – неясно. Mobile Safari Pre IOS 6 не поддерживает его.

Заключение

Спасибо за внимание! Возникнут трудности – пишите в комментариях!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://webdesign.tutsplus.com
Перевел: Владислав Бондаренко