Стилизация checkbox и radio кнопок на jQuery

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

Но очень часто, при верстке сайта, вы можете столкнуться с такой ситуацией, что дизайнер решил изменить внешний вид чекбоксов или радио-кнопок на какой-то свой. И в этом случае у вас, как у верстальщика, может возникнуть вопрос, как же изменить стандартный вид чекбокса и радио-кнопки?

Описанный ниже способ является устаревшим, поэтому советую обратить внимание на более современный подход стилизации checkbox и radio-кнопок.

И на самом деле здесь есть 2 подхода. Первый с помощью CSS3 (но к сожалению, это не кроссбраузерно) и второй, это использовать jQuery.

В данном видеоуроке, мы с вами поговорим именно о втором способе, когда используется jQuery.

Наша главная задача, научиться менять внешний вид чекбоксов и радио-кнопок, а также соблюсти следующие требования:

  • Точное соответствие дизайну
  • Работа со стилизованными чекбоксами и радио-кнопками ничем не должно отличаться от работы с обычными
  • Кроссбраузерность
  • Минимальный размер скрипта
  • Минимизировать использование дополнительного HTML и CSS кода
  • Простота реализации

О том, как это все сделать, смотрите в видеоуроке ниже.

Смотреть видеоурок

При использование данного jQuery-скрипта, вы сможете изменить дизайн чекбоксов и радио-кнопок, на тот, который захотите. Но разумеется, если на ваш сайт зайдет посетитель с отключенным JavaScript, он увидит стандартные чекбоксы и радио-кнопки.

В следующих уроках мы с вами поговорим о том, как изменить внешний вид у тега select.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

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

Добавить комментарийКомментариев (2)

Ирина 24 апреля в 00:17

Здравствуйте, такая же проблема как у Владислава. Направьте на путь истинный, если не сложно.

Ответить

Владислав 15 октября 2015 г. в 17:22

Здравствуйте. Почему у меня чекбокс отмечается два раза и после второго отметка не снимается?

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

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

« Вернуться назад