Красивые Radio Buttons (радио кнопка) и Checkbox (чекбокс) | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКрасивые Radio Buttons (radio кнопка) и Checkbox CSS (чекбокс)
Дата: 09.04.2013 в 22:00 | Просмотров: 12274

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

Красивые Radio Buttons (радио кнопка) и Checkbox (чекбокс) на CSS3
Скачатьбесплатно с сервера
Демодемонстрация

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

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

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

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

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

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

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

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

Теперь, только в случае, если вы не знаете много о

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

Шаг 3: CSS стили

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

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

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

sprite для чекбокса и радио кнопки

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

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

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

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

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

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

css чекбокс в IE

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

Заключение

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

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


ВСЕ КОММЕНТАРИИ

    1. Дмитрий:
      http://onblog.pw/

      Интересная статья, но возник такой вопрос: а что увидят пользователи браузеров, которые не поддерживают такой способ стилизации переключателей?

      1. Влад Бондаренко:
        http://vladmaxi.net

        Здравствуйте! Ничего страшного не произойдет, просто пользователь увидит обычные, не стилизованные переключатели.

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

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