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

Внимание! Данный способ является устаревшим, поэтому его не стоит использовать на реальных проектах. Вместо него лучше применяйте стилизацию на CSS.

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

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

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

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

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

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

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

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

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

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

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

  • 28.01.2018 00:51

    Проблема таже…. еще и радио можно выбрать сколько хочешь а не одну

    • Я думаю, проблема связана с тем, что у ваши тегов <input type="radio"> нет атрибутов name или у них разные значения. За счет этого они работают не как общая группа, а как независимые кнопки.

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

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