Стилизация checkbox средствами CSS

Стандартные HTML-чекбоксы выглядят по-разному в каждом браузере и часто плохо вписываются в дизайн сайта. Поэтому при разработке форм их обычно стилизуют средствами CSS.

В этой статье рассмотрим простой способ создания собственного checkbox без использования JavaScript.

HTML-разметка чекбокса

Начнем с обычной HTML-разметки:

<div>
    <input type="checkbox" id="check" name="check" />
    
    <label for="check">
        Я согласен с политикой конфиденциальности компании
        и даю согласие на обработку персональных данных
    </label>
</div>

Здесь используется связка input и label через атрибут for. Благодаря этому чекбокс можно переключать кликом по тексту.

CSS-стилизация checkbox

Теперь скроем стандартный чекбокс и создадим собственный через псевдоэлемент :before.

// checkbox
input[type=checkbox],
input[type=radio] {
    display: none;
}

input[type=checkbox] + label:before {
    content: "\2713";
    color: transparent;
    display: inline-block;
    border: 1px solid #ced4da;
    font-size: 20px;
    line-height: 22px;
    margin: -5px 5px 0 0;
    height: 20px;
    width: 20px;
    text-align: center;
    vertical-align: middle;
    transition: color ease .3s;
}

input[type=checkbox]:checked + label:before {
    color: red;
}

Как работает стилизация

• Стандартный checkbox скрывается через display: none;
• Псевдоэлемент :before создает кастомный квадрат;
• Символ \2713 — это галочка Unicode;
• Пока checkbox не активен — галочка прозрачная;
• После выбора checkbox цвет галочки меняется на красный.

SASS-версия стилей

Если вы используете SASS или SCSS, можно записать стили в более компактном виде:

// checkbox
input[type=checkbox],
input[type=radio]
  display: none

input[type=checkbox] + label:before
  content: "\2713"
  color: transparent
  display: inline-block
  border: 1px solid #ced4da
  font-size: 20px
  line-height: 22px
  margin: -5px 5px 0 0
  height: 20px
  width: 20px
  text-align: center
  vertical-align: middle
  transition: color ease .3s

input[type=checkbox]:checked + label:before
  color: red

Итог

Такой способ позволяет быстро создать аккуратный кастомный checkbox, который будет одинаково выглядеть во всех современных браузерах.

При необходимости можно легко изменить:

• цвет галочки;
• размер checkbox;
• скругление углов;
• анимацию;
• цвет рамки и фона.