Войти
Регистрация

Меняем стиль чекбоксов и радиокнопок CSS

Меняем стиль чекбоксов и радиокнопок CSS

Здравствуйте, друзья!

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

Тот же чекбокс в разных браузерах выглядит по-своему, зависит от фантазии разработчиков этих браузеров. Нам этот элемент знаком в виде серого квадратика.

Просто стилями CSS изменить его нельзя. Если мы применим к нему стиль, например такой:

input[type="checkbox"] {
   background:red;
   border:2px solid green;
}

Этот вариант не сработает.

Как же стилизовать чекбокс?

Для этого мы воспользуемся псевдоэлементами в CSS.

Напишем HTML-код чекбокса и метки для него.

<div>
  <input type="checkbox" id="check-id" />
  <label for="check-id"></label>
</div>

Здесь мы чекбокс с меткой добавили внутрь блока, чтобы у них был общий родитель, это сделано на тот случай, если у Вас будет несколько чекбоксов, чтобы каждый был в отдельном блоке и мы в CSS могли обращаться к ним через селектор элемента родителя.

Важно, чтобы тег <label> был привязан к чекбоксу, чтобы мы могли при клике по нему сделать чекбокс отмеченным. Делается это с помощью атрибута for со значением атрибута id чекбокса.

Если у Вас будет несколько чекбоксов, то важно, чтобы у них были разные id.

Теперь полностью меняем стиль чекбокса с помощью псевдоэлемента для тега <label>:

div input[type="checkbox"] {
   display: none;
}
div label {
   background: #fff;
   border: 1px solid;
   border-radius: 3px;
   cursor: pointer;
   display: inline-block;
   height: 20px;
   position: relative;
   width: 20px;
}
div label:before {
   background: url(check.png) no-repeat center center;
   background-size: cover;
   content: "";
   display: none;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
div input[type="checkbox"]:checked +label:before {
   display: block;
}

Принцип такой:

  • Скрываем сам чекбокс.
  • Стилизуем тег <label> в виде пустого квадрата.
  • Создаем псевдоэлемент для тега <label>, задаем ему задний фон в виде картинки с галочкой и скрываем его.

Теперь по клику на стилизованный тег <label> у нас скрытый чекбокс принимает отмеченное значение и срабатывает правило CSS в последней строке, которое делает псевдоэлемент выдимым.

Тоже самое можно сделать для нескольких чекбоксов, просто сделайте несколько блоков с чекбоксом и его меткой.

Также это можно применить и для радиокнопок. Cоздайте несколько блоков с радиокнопками и в CSS [type="checkbox"] смените на [type="radio"].

Получился такой стилизованный чекбокс:

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?