Стилизация чекбоксов (кастомизация checkbox)

Зачем стилизовать чекбоксы?

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

Стилизация чекбоксов позволяет:

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

Методы стилизации чекбоксов

1. Стилизация стандартных чекбоксов с помощью CSS

Прежде чем вы сможете настроить свои флажки, важно понять, как они создаются. Флажки обычно создаются с использованием HTML элемента  <input>  с атрибутом  type, равным "checkbox". Этот элемент может быть оформлен с помощью свойств CSS, как и любой другой элемент HTML.

Обычно html разметка стандартного чекбокса выглядит примерно так:

<form>
 <input type="checkbox" id="wr" name="wr">
 <label for="wr">Чекбокс</label> 
</form>

Вот основные CSS-свойства, которые можно использовать для стилизации чекбоксов:

1. box-shadow: добавляет тень к чекбоксу.
2. width и height: изменяют размер чекбокса.
3. transform: альтернатива width и height с меньшей поддержкой.
4. accent-color: изменяет цвет фона чекбокса.

Давайте разметим наш чекбокс при помощи первых свойств, которые поддерживаются абсолютно всеми браузерами:

label{font-size:1.5rem}
input[type="checkbox"] {
    width: 20px;
    height: 20px;
  	box-shadow: -2px 0 5px rgba(0, 0, 0.23);
}

А теперь рассмотрим более современные свойства (3 и 4):

label { font-size:1.5rem }
input[type="checkbox"] {	
	transform: scale(1.6); 
    accent-color: #4CAF50;
}

Ну и до кучи мы еще можем добавить какие-нибудь визуальные эффекты при фокусе:

input[type="checkbox"]:focus {
    outline: 2px solid #4caf5052;
}

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

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

2. Стилизация с использованием псевдоэлементов

Псевдоэлементы ::before и ::after позволяют создать более сложные и уникальные стили для чекбоксов. Это гибкий метод, который позволяет применять различные эффекты. Суть его заключается в том, что мы скрываем стандартный чекбокс, а на его месте создаем кастомный элемент. Вот пример html разметки:

<input type="checkbox" class="wr-checkbox" id="wr" name="wr">
<label for="wr">Чекбокс</label>

По факту мы взяли базовую разметку, которая представлена выше и добавили input свой класс. Теперь напишем для него css:

1. Скрываем стандартный input. Сделать это можно при помощи display: none, но мы его скроем вот так:

   .wr-checkbox {
     position: absolute;
     z-index: -1;
     opacity: 0;
   }

   Здесь мы при помощи position: absolute убираем инпут его из потока, далее при помощи z-index: -1 помещаем его ниже существующих элементов, а при помощи opacity: 0  делаем его полностью прозрачным. Такое скрытие нам необходимо для того, чтобы мы могли получить состояние фокуса, а затем стилизовать «подделный» checkbox , когда он будет находиться в нём.

2. Создаем поддельный чекбокс. Сделаем это при помощи псевдоэлемента ::before и посредством CSS зададим ему размеры, обводку и т.д.

   /* вертикальное центрирование флажка и надписи к нему */	
   .wr-checkbox+label {
     display: inline-flex;
     align-items: center;
     user-select: none;
   }
   /* создаем поддельный чекбокс */		
   .wr-checkbox+label::before {
     content: '';
     display: inline-block;
     width: 1.3em;
     height: 1.3em;
     border: 2px solid #4CAF50;
     border-radius: 0em;
     margin-right: 0.5em;
     position: relative;
   }

   

3. Создаем флажок — пишем стили при нахождении элемента в состоянии checked). Рассмотрим несколько вариантов.
   1. Делаем просто кубик (в кубике, т.к. в примере выше я убрал скругления):

   .wr-checkbox:checked+label::after {
       content: "";
       position: absolute;
       width: 0.7em;
       height: 0.7em;
       background-color: #4CAF50;
       margin: 0.45em;
   }

   
   2. В свойство content, мы можем добавить эмодзи, спецсимволы, изображение, инлайн SVG-иконку. Пример с эмодзи:

   .wr-checkbox:checked+label::after {
       content: "✔️";
       position: absolute;
       margin: 0.10em;
   }

   
   Пример со спецсимволом (так же можно использовать шрифтовые (CSS) иконки к примеру от Font Awesome):

   .wr-checkbox:checked+label::after {
       content: "\2605";
       position: absolute;
       font-size: 1.5rem;
       line-height: 0.6em;
       color: #4CAF50;
       margin-left: 0.1em;
   }

   
   Пример добавления изображения:

   .wr-checkbox:checked+label::before {
       background-image: url(https://web-revenue.ru/wp-content/uploads/2024/10/icons8-check-48.png);
       background-size: 100%;
   }

   
   Пример добавления инлайн SVG-иконки:

   .wr-checkbox:checked+label::before {
       background-color: #50ef0b;
       background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e);
       background-repeat: no-repeat;
       background-position: center center;
       background-size: 70% 70%;
   }

   

4. Добавляем код для стилизации чекбокса при нахождении его в состояниях hover, active, focus и disabled.

   /* стили при наведении курсора на checkbox */
   .wr-checkbox:not(:disabled):not(:checked)+label:hover::before {
     border-color: #50ef0b;
   }
   /* стили для активного состояния чекбокса (при нажатии на него) */
   .wr-checkbox:not(:disabled):active+label::before {
     background-color: #b3d7ff;
     border-color: #b3d7ff;
   }
   /* стили для чекбокса, находящегося в фокусе */
   .wr-checkbox:focus+label::before {
     box-shadow: 0 0 0 0.2rem rgba(80, 239, 11, 0.25);
   }
   /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
   .wr-checkbox:focus:not(:checked)+label::before {
     border-color: #80bdff;
   }
   /* стили для чекбокса, находящегося в состоянии disabled */
   .wr-checkbox:disabled+label::before {
     background-color: #e9ecef;
   }

А теперь рассмотрим самый продвинутый способ который с самыми большими возможностями)

3. Псевдоэлементы и дополнительный контейнер (ы)

В даном случае действуют все те же правила и приемы что и во втором, но мы можем анимировать различные эффекты и практически ничем не ограничены в плане внешнего вида. Давайте рассмотрим пару не совсем стандартных вариантов.

Ромбовидный чекбокс с анимацией

Html разметка:

<div class="styled-input-diamond">
     <div class="styled-input-single">
        <input type="checkbox" name="fieldset" id="checkbox1-example-one">
        <label for="checkbox1-example-one">Заголовок 1</label>
     </div>
     <div class="styled-input-single">
        <input type="checkbox" name="fieldset" id="checkbox1-example-two">
        <label for="checkbox1-example-two">Заголовок 2</label>
     </div>
</div>

Css:

/* Определяем отступ слева и размер шрифта для элемента с ромбовидным чекбоксом */
.styled-input-diamond {
    padding-left: 15px;
  font-size: 1.3rem
}

/* Устанавливаем позиционирование, отступы и выравнивание текста для одиночного элемента ввода */
.styled-input-single {
    position: relative;
    padding: 20px 0 20px 40px;
    text-align: left;
}

/* Устанавливаем курсор указателя для label элемента */
.styled-input-single label {
    cursor: pointer;
}

/* Скрываем checkbox, делая его невидимым и перемещая за пределы видимой области */
.styled-input-single input[type=checkbox] {
    position: absolute;
    top: 0;
    left: -9999px;
    visibility: hidden;
}
    
/* Определяет стили для псевдоэлементов :before и :after label */
.styled-input-single label:before, .styled-input-single label:after {
    content: "";
    position: absolute;
    top: 50%;
  border-radius: 0;
}

/* Определяем стили для псевдоэлемента :before label (фон чекбокса) */
.styled-input-single label:before {
    left: 0;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    background: #f7f7f7;
    box-shadow: 0 0 1px grey;
    transform: rotate(45deg);
}
    
/* Определяем стили для псевдоэлемента :after label (галочка внутри чекбокса) */
.styled-input-single label:after {
    left: 5px;
    width: 20px;
    height: 20px;
    margin: -10px 0 0;
    opacity: 0;
    background: #37b2b2;
    transform: translate3d(-40px, 0, 0) scale(0.5);
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* Определяем стили для псевдоэлемента :after label, когда checkbox выбран */
.styled-input-diamond input[type=checkbox]:checked + label:after {
    transform: rotate(45deg);
    opacity: 1;
}

Анимированные CSS-чекбоксы в формате SVG

Html разметка:

<div class="animate-checkbox">
    <input type="checkbox" class="animate-check" id="check1"/>
    <label for="check1" class="animate-label">
      <svg viewBox="0 0 100 100" height="50" width="50">
        <rect x="30" y="20" width="50" height="50" stroke="black" fill="none" />
        <g transform="translate(0,-952.36216)" id="layer1">
          <path id="path4146" d="m 55,978 c -73,19 46,71 15,2 C 60,959 13,966 30,1007 c 12,30 61,13 46,-23" fill="none" stroke="black" stroke-width="3" class="path1" />
        </g>
      </svg> <span>Checkbox стиль 1</span>

    </label>
  </div>
  <div class="animate-checkbox">
    <input type="checkbox" class="animate-check" id="check2" />
    <label for="check2" class="animate-label">
      <svg width="50" height="50" viewbox="0 0 100 100">
        <rect x="30" y="20" width="50" height="50" stroke="black" fill="none" />
        <g transform="translate(0,-952.36222)">
          <path d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4 " stroke="black" stroke-width="3" fill="none" class="path1" />
        </g>
      </svg>
      <span>Checkbox стиль 2</span>
    </label>
  </div>

Css:

/* Устанавливает позицию, отображение, ширину, высоту и скрывает переполнение элемента */
.animate-checkbox {
    position:relative;
    display:block;
    width:100%;
    height:60px;
    overflow:hidden;
}

/* Устанавливает размер, позицию и прозрачность элемента чекбокса */
.animate-check {
    width:50px;
    height:50px;
    position:absolute;
    opacity:0;
}

/* Устанавливает позицию и отступ сверху для элемента label span */
.animate-label span {
    position:absolute;
    margin-top:15px;
}

/* Устанавливает длину штрихов и смещение для path элемента */
.path1{
    stroke-dasharray:400;
    stroke-dashoffset:400;
    transition:.5s all;
}

/* Устанавливает смещение штрихов для path элемента, когда checkbox выбран */
.animate-check:checked + label svg g path {
    stroke-dashoffset:0;
}

Чекбокс в виде переключателя

Html разметка:

<div class="toggle-pill-dark">
     <input type="checkbox" id="pill4" name="check">
     <label for="pill4"></label>
</div>

Css:

.toggle-pill-dark input[type="checkbox"] {
  display: none;
}
.toggle-pill-dark input[type="checkbox"] + label {
  display: block;
  position: relative;
  width: 3em;
  height: 1.6em;
  margin-bottom: 20px;
  border-radius: 1em;
  background: #303e58;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-transition: background 0.1s ease-in-out;
  transition: background 0.1s ease-in-out;
}
.toggle-pill-dark input[type="checkbox"] + label:before {
  content: "";
  display: block;
  width: 1.2em;
  height: 1.2em;
  border-radius: 1em;
  background: #e84d4d;
  position: absolute;
  left: 0.2em;
  top: 0.2em;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.toggle-pill-dark input[type="checkbox"]:checked + label:before {
  background: #47cf73;
  box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
  left: 1.6em;
  -webkit-transform: rotate(295deg);
  transform: rotate(295deg);
}

Чекбоксы со значком в форме кнопок

Вариант 1: иконка и кнопка.

Html разметка:

<div class="container-wrapper">
  <div class="custom-control-iconSelect mr-2">
    <input type="checkbox" id="customCheck1" name="customCheck" value="1" class="custom-control-input">
    <label class="custom-control-label" for="customCheck1">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" class="iconSelect-icon" viewBox="0 0 483.3 483.3"><path d="M424.3 57.75H59.1c-32.6 0-59.1 26.5-59.1 59.1v249.6c0 32.6 26.5 59.1 59.1 59.1h365.1c32.6 0 59.1-26.5 59.1-59.1v-249.5c.1-32.6-26.4-59.2-59-59.2zm32.1 308.7c0 17.7-14.4 32.1-32.1 32.1H59.1c-17.7 0-32.1-14.4-32.1-32.1v-249.5c0-17.7 14.4-32.1 32.1-32.1h365.1c17.7 0 32.1 14.4 32.1 32.1v249.5h.1z"/><path d="M304.8 238.55l118.2-106c5.5-5 6-13.5 1-19.1-5-5.5-13.5-6-19.1-1l-163 146.3-31.8-28.4c-.1-.1-.2-.2-.2-.3-.7-.7-1.4-1.3-2.2-1.9L78.3 112.35c-5.6-5-14.1-4.5-19.1 1.1-5 5.6-4.5 14.1 1.1 19.1l119.6 106.9-119.1 111.5c-5.4 5.1-5.7 13.6-.6 19.1 2.7 2.8 6.3 4.3 9.9 4.3 3.3 0 6.6-1.2 9.2-3.6l120.9-113.1 32.8 29.3c2.6 2.3 5.8 3.4 9 3.4s6.5-1.2 9-3.5l33.7-30.2 120.2 114.2c2.6 2.5 6 3.7 9.3 3.7 3.6 0 7.1-1.4 9.8-4.2 5.1-5.4 4.9-14-.5-19.1l-118.7-112.7z"/></svg>
      <div class="mt-1">Эл. почта</div>
    </label>
  </div>

  <div class="custom-control-iconSelect ml-2">
    <input type="checkbox" id="customCheck2" name="customCheck" value="2" class="custom-control-input" checked>
    <label class="custom-control-label" for="customCheck2">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" class="iconSelect-icon" viewBox="0 0 473.806 473.806"><path d="M374.456 293.506c-9.7-10.1-21.4-15.5-33.8-15.5-12.3 0-24.1 5.3-34.2 15.4l-31.6 31.5c-2.6-1.4-5.2-2.7-7.7-4-3.6-1.8-7-3.5-9.9-5.3-29.6-18.8-56.5-43.3-82.3-75-12.5-15.8-20.9-29.1-27-42.6 8.2-7.5 15.8-15.3 23.2-22.8 2.8-2.8 5.6-5.7 8.4-8.5 21-21 21-48.2 0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5-6-6.2-12.3-12.6-18.8-18.6-9.7-9.6-21.3-14.7-33.5-14.7s-24 5.1-34 14.7l-.2.2-34 34.3c-12.8 12.8-20.1 28.4-21.7 46.5-2.4 29.2 6.2 56.4 12.8 74.2 16.2 43.7 40.4 84.2 76.5 127.6 43.8 52.3 96.5 93.6 156.7 122.7 23 10.9 53.7 23.8 88 26 2.1.1 4.3.2 6.3.2 23.1 0 42.5-8.3 57.7-24.8.1-.2.3-.3.4-.5 5.2-6.3 11.2-12 17.5-18.1 4.3-4.1 8.7-8.4 13-12.9 9.9-10.3 15.1-22.3 15.1-34.6 0-12.4-5.3-24.3-15.4-34.3l-54.9-55.1zm35.8 105.3c-.1 0-.1.1 0 0-3.9 4.2-7.9 8-12.2 12.2-6.5 6.2-13.1 12.7-19.3 20-10.1 10.8-22 15.9-37.6 15.9-1.5 0-3.1 0-4.6-.1-29.7-1.9-57.3-13.5-78-23.4-56.6-27.4-106.3-66.3-147.6-115.6-34.1-41.1-56.9-79.1-72-119.9-9.3-24.9-12.7-44.3-11.2-62.6 1-11.7 5.5-21.4 13.8-29.7l34.1-34.1c4.9-4.6 10.1-7.1 15.2-7.1 6.3 0 11.4 3.8 14.6 7l.3.3c6.1 5.7 11.9 11.6 18 17.9 3.1 3.2 6.3 6.4 9.5 9.7l27.3 27.3c10.6 10.6 10.6 20.4 0 31-2.9 2.9-5.7 5.8-8.6 8.6-8.4 8.6-16.4 16.6-25.1 24.4-.2.2-.4.3-.5.5-8.6 8.6-7 17-5.2 22.7l.3.9c7.1 17.2 17.1 33.4 32.3 52.7l.1.1c27.6 34 56.7 60.5 88.8 80.8 4.1 2.6 8.3 4.7 12.3 6.7 3.6 1.8 7 3.5 9.9 5.3.4.2.8.5 1.2.7 3.4 1.7 6.6 2.5 9.9 2.5 8.3 0 13.5-5.2 15.2-6.9l34.2-34.2c3.4-3.4 8.8-7.5 15.1-7.5 6.2 0 11.3 3.9 14.4 7.3l.2.2 55.1 55.1c10.3 10.2 10.3 20.7.1 31.3zM256.056 112.706c26.2 4.4 50 16.8 69 35.8s31.3 42.8 35.8 69c1.1 6.6 6.8 11.2 13.3 11.2.8 0 1.5-.1 2.3-.2 7.4-1.2 12.3-8.2 11.1-15.6-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3 3.7-15.6 11s3.5 14.4 10.9 15.6zM473.256 209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2 3.7-15.5 11-1.2 7.4 3.7 14.3 11.1 15.6 46.6 7.9 89.1 30 122.9 63.7 33.8 33.8 55.8 76.3 63.7 122.9 1.1 6.6 6.8 11.2 13.3 11.2.8 0 1.5-.1 2.3-.2 7.3-1.1 12.3-8.1 11-15.4z"/></svg>
      <div class="mt-1">Телефон</div>
    </label>
  </div>
</div>

Css:

/* Стиль для контейнера */
.container-wrapper {
  display: flex;
  align-items: center; /* Выравнивание элементов по горизонтали по центру */
  justify-content: center; /* Распределение пространства между элементами по вертикали по центру */
  width: 100%;
  max-width: 35rem; /* Максимальная ширина обертки */
}
/* Устанавливаем отступы справа и слева */	
.mr-2 {
  margin-right: 0.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
/* Стиль для кастомного элемента выбора с иконкой */
.custom-control-iconSelect {
  position: relative;
  display: block;
  min-height: 1.5rem;
  width: 100%;
}
/* Стиль для скрытого input элемента */
.custom-control-iconSelect .custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1; /* Отправляем input за другие элементы */
  width: 1rem;
  height: 1.25rem;
  opacity: 0; /* Скрываем input */
}
/* Стиль для иконки */
.iconSelect-icon {
  width: 3rem;
  height: 3rem;
}
/* Стиль для SVG иконок */
.custom-control-label svg {
  fill: currentColor;
}
/* Стиль для label при выборе input */
.custom-control-iconSelect .custom-control-input:checked ~ .custom-control-label {
  background: #FF6300;
  color: #fff;
}
/* Стиль для label элемента */
.custom-control-label {
  display: inline-block;
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
  background-color: #eee;
  width: 100%;
  text-align: center;
  border-radius: 0.2rem;
  padding: 1rem 0 1rem;
  font-size: 1.4rem;
  transition: background-color 0.1s linear, color 0.1s linear; /* Анимация изменения цвета фона и текста */
}
/* Стиль для label при наведении */
.custom-control-label:hover {
  background-color: #ccc;
}
/* Стиль для иконки после выбора input */
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 70%;
}

Вариант 2: иконка, кнопка и чекбокс.

Html разметка таже.

CSS тот же, единственно осталось отрисовать чекбоксы:

.custom-control-label {padding: 1rem 0 2.5rem;}
/* Стиль для псевдоэлемента ::before (иконка до выбора) */
.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none; /* Отключаем обработку событий для иконки */
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}
/* Стиль для псевдоэлемента ::before и ::after (центрирование иконки после выбора) */
.custom-control-label::before,
.custom-control-label::after {
  top: auto;
  left: 0;
  right: 0;
  bottom: 1rem;
  margin: auto;
}

Дополнительная информация

Чтобы кастомные элементы оставались доступными, важно соблюдать следующие правила:

• Стилизовать состояние :focus и :checked.
• Использовать атрибут aria-checked, чтобы помочь скринридерам:

  <div role="checkbox" aria-checked="false" tabindex="0">Custom Checkbox</div>

• Добавлять видимый фокус при использовании клавиатуры.

Важно, чтобы стилизованные чекбоксы оставались доступными для всех пользователей. Используйте атрибуты aria-checked

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

Использование JavaScript позволяет динамически изменять стиль чекбокса или добавлять более сложные эффекты:

document.querySelector("input[type='checkbox']").addEventListener("change", function() {
    if (this.checked) {
        document.querySelector(".custom-checkbox").classList.add("checked");
    } else {
        document.querySelector(".custom-checkbox").classList.remove("checked");
    }
});

Заключение

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

Теперь вы знаете, как стилизовать чекбоксы различными способами. Экспериментируйте, применяйте новые знания на практике и создавайте удивительные интерфейсы!