Стилизация флажков (чекбоксов) в CSS

Несмотря на то, что в последних версиях браузеров (как минимум самого популярного — Google Chrome) чекбоксы стали выглядеть симпатичнее, получили цвет и даже некоторую визуальную объемность, все равно для уникального дизайна их требуется кастомизировать. В этой статье мы научимся изменять внешний вид флажков с помощью обычного CSS.

Содержание:
1. Простой пример
2. Как осуществляется создание кастомного чекбокса или переключателя
3. Создание стильного чекбокса
4. Еще примеры по кастомизации checkbox и label
5. Метод «Checkbox Hack»
6. CSS свойство appearance для Checkbox
Заключение

1. Простой пример

Для начала приведем самый простой пример кастомного чекбокса, буквально из нескольких строчек кода HTML:

<div>
<input id="highload0" class="checkbox-custom" name="highload0" type="checkbox">
<label for="highload0" class="checkbox-custom-label">Я согласен</label>
</div>
и CSS
<style>
#highload0 {
               opacity: 0;
}
#highload0 ~ label::before {
#highload0 {
    opacity: 0;
}
#highload0 ~ label::before {
  content: '\2713';  
  text-align: center;
  color: white;
  line-height: 1em;
  width: 1em;
  height: 1em;
  border: 2px inset #000;
  border-radius: 0.25em;
  margin: 0.25em;
  display: inline-block;
}
#highload0:checked ~ label::before {
  color: red;
  border: 2px inset red;
}
</style>

Если посмотреть на внешний вид чекбокса, то обычный человек не увидит ничего необычного: цвет поменялся и все.

Только вот проблема в том, что обычное свойство CSS color применительно к checkox’у не даст никакого видимого результата, поэтому даже для обычной его окраски приходится задействовать что-то из псевдоэлементов:

• ::after
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::selection
• ::slotted

Чаще всего применяются ::after и ::before. Как несложно догадаться из английского перевода названий, эти псевдо позволяют стилизовать определенные части родительского элемента, в данном случае это чекбокс.

Если вы хотите в дальнейшем развиваться во фронтенде, то не обходите стороной курсы наших партнеров от Mate Academy, Powercode, Robot Dreams. Они помогут выйти вам на новый более качественный профессиональный уровень.

2. Как осуществляется создание кастомного чекбокса или переключателя

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

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

Стандарты HTML и CSS дают не так много возможностей для изменения внешнего вида чекбокса. С помощью стилей можно изменить его размер и цвет — по большому счету и все. Но нам этого мало, дизайнер в фигме или фотошопе создал уникальный флажок и теперь надо его как-то воплотить в код. Как это делается?

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

3. Создание стильного чекбокса

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

Код html:

<input type="checkbox" id="highload1" name="highload1">
<label for="highload1" data-onlabel="on" data-offlabel="off" class="lb1"></label>
Стили:
<style>
.lb1 {      
               margin: 2em;
}
#highload1 {       
               display: none;
}
#highload1+.lb1, #highload1+.lb1::before, #highload1+.lb1::after {
               transition: all .3s;
}
#highload1+.lb1 {
               display: inline-block;
               position: relative;
               width: 140px;
               height: 60px;
               border-radius: 30px;
               cursor: pointer;
}
#highload1+.lb1::before {
               display: block;
               content: attr(data-offlabel);
               position: absolute;
               top: 18px;
               right: 10px;
               color: black;
               font-family: 'Open Sans', sans-serif;
               font-size: 19px;
}
#highload1+.lb1::after {
     border-radius: 50%;
               content: '';
               position: absolute;
               top: 3px;
               left: 3px;
               width: 54px;
               height: 54px;
               background-color: white;          
}
#highload1:checked+.lb1::before {
               content: attr(data-onlabel);
               left: 16px;
               right: auto;
               color: #fff;
}
#highload1:checked+.lb1::after {
               left: 83px;
               background-color: #f7f7f7;
}
 
#highload1+.lb1 {             
               background-color: #ccc;
}
#highload1:checked+.lb1 {
               background-color: green;
}
#highload1:checked+.lb1::before {
               color: #fff;
}
</style>

Кода много, но пугаться не стоит — тут все очень просто. Скрываем инпут чекбокса, затем с помощью псевдоэлементов и в зависимости от состояния чекбокса меняем его внешний вид. Текст для разных состояний флажка мы берем из атрибутов data-onlabel и data-offlabel.

Атрибуты «data» обычно используются в JS, например, очень распространенная библиотека jQuery активно работает с ними, но, как видите из нашего примера, и в CSS можно также задействовать их.

4. Еще примеры по кастомизации checkbox и label

Помимо приведенных выше примеров, есть и другие варианты реализации уникального внешнего вида такого элемента как чекбокс.

Несколько чекбоксов

Вот неплохой вариант:

<h1>Кастомные Checkbox-ы</h1>
<label class="container">Первый пункт
  <input type="checkbox" checked="checked" class="check-highload">
  <span class="highload2"></span>
</label>
<label class="container">Второй пункт
  <input type="checkbox" class="check-highload">
  <span class="highload2"></span>
</label>
<label class="container">Третий пункт
  <input type="checkbox" class="check-highload">
  <span class="highload2"></span>

Стили:

<style>
/* контейнер */.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* скрываем дефолтный флажок */.container .check-highload {
  position: absolute;
  opacity: 0;
}
/* Создаем кастомный checkbox */.highload2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
/* При наведении указателя мыши перекрашиваем */.container:hover .check-highload ~ .highload2 {
  background-color: #ccc;
}
/* Когда отмечен, то красим в зеленый цвет */.container .check-highload:checked ~ .highload2 {
  background-color: green;
}
/* Создаем когда отмечено (не видно, когда не отмечено) */.highload2:after {
  content: "";
  position: absolute;
  display: none;
}
/* Показываем когда отмечен */.container .check-highload:checked ~ .highload2:after {
  display: block;
}
/* Стили индикатора */.container .highload2:after {
  left: 8px;
  top: 4px;
  width: 8px;
  height: 12px;
  border: solid white;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
</style>

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

Еще вариант необычного внешнего вида checkbox на чистом CSS

Как выглядит:

HTML разметка:

<ul style="list-style-type: none;">
  <li>
    <input class="highload-checkbox" id="highload-checkbox-1" type="checkbox" value="val1">
    <label for="highload-checkbox-1">Я программист</label>
  </li>
  <li>
    <input class="highload-checkbox" id="highload-checkbox-2" type="checkbox" value="val2" checked>
    <label for="highload-checkbox-2">Я читаю Highload</label>
  </li>
  <li>
    <input class="highload-checkbox" id="styled-checkbox-3" type="checkbox" value="val3" disabled>
    <label for="highload-checkbox-3">Я учу CSS</label>
  </li>
  <li>
    <input class="highload-checkbox" id="highload-checkbox-4" type="checkbox" value="val4">
    <label for="highload-checkbox-4">Я ничего не знаю</label>
  </li>
</ul>
И, конечно, стили CSS с комментариями:
<style>
.highload-checkbox {
  position: absolute;
  opacity: 0; /* скрываем */}
  .highload-checkbox  + label {
    position: relative;
    cursor: pointer;
    padding: 0;
  }

    /* бокс */  .highload-checkbox + label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: white;
  }

  /* бокс при наведении */  .highload-checkbox:hover + label:before {
    background: blue;
  }
  
  /* бокс в фокусе */  &:focus + label:before {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
  }

  /* бокс отмеченный */  .highload-checkbox:checked + label:before {
    background: blue;
  }
  
  /* отключенный стиль label */  .highload-checkbox:disabled + label {
    color: #b7b7b7;
    cursor: auto;
  }

  /* бокс отключенный */  .highload-checkbox:disabled + label:before {
    box-shadow: none;
    background: #ddd;
  }

  /* отмеченный */  .highload-checkbox:checked + label:after {
    width: 2px;
    height: 2px;
    content: "";
    position: absolute;
    top: 9px;
    right: 0;
    left: 9px;
    box-shadow: 0 0 0 8px lime;
    border-radius: 100%;
  }
</style>

Для отмеченного чекбокса (правило .highload-checkbox:checked + label:after) можно не только нарисовать круг как в примере, но и поставить галочку, эмоджи, либо вообще любой другой рисунок.

Флажок на JS

Все примеры в этом материале используют только связку HTML + CSS, то есть так называемый «чистый CSS». Но стоит знать, что для работы с флажками также можно довольно эффективно использовать JS.

Например, создать div, повесить на него событие:

<input id="myHighloadCheck" name="myHighloadCheck" type="checkbox">
<div id="myHighload" >
Функция:
 
<script>
function myHighloadFunc(){
    if (document.getElementById('myHighloadCheck').checked){
        document.getElementById('myHighloadCheck').checked = false;
        document.getElementById("myHighload").style.background = 'beige';
        document.getElementById("myHighload").innerHTML = 'не согласен';

    }
    else{
        document.getElementById('myHighloadCheck').checked = true;
        document.getElementById("myHighload").style.background = '#53bdeb';
        document.getElementById("myHighload").innerHTML = 'beige';
        document.getElementById("myHighload").innerHTML = 'согласен';
    }
}
</script>
 
И немного стилей:
 
<style>
#myHighloadCheck{
    display:none;
}
#myHighload{
    width: 129px;
    height: 23px;
    background: beige;
    cursor: pointer;
    text-align: center;
}
</style>
 
 
 
   
  
  
Тут тоже все очень просто: по клику на div узнаем отмечен ли флажок и если отмечен, то задаем один цвет и текст диву, а если не отмечен, соответственно другие. И не забываем также изменить состояние у чекбокса на противоположное!
 
Подобный подход хоть и не часто, но все же встречается при создании сайтов. Узнать о всех подводных камнях фронтенда, вы можете посетив специальные курсы, где с вами будут обмениваться опытом практикующие специалисты.
   
 
5. Метод «Checkbox Hack»
 
В примерах выше мы фактически использовали так называемый «Checkbox Hack» — то есть задействовали другой элемент для управления checkbox’а вместо непосредственной работы с ним. Сам флажок скрыт и работаем мы с label, но данные на сервер отправляются именно такие, какие у инпута.
 
Пример разметки для понимания:
 
<label for="highload3">Сделай что-нибудь</label>
<input type="checkbox" id="highload3" name="highload3">
<div class="test-me">Test me</div>
 
Стили
 
.test-me {
               color: black;
  /* состояние по умолчанию */}
#highload3:checked ~ .test-me {
  /* Отмеченное состояние! Без JavaScript!*/  color: red;
}
 
Теперь, если мы кликнем по элементу label, то текст в диве с классом test-me изменит цвет с черного на красный. И все это без JS, на чистом CSS.
 
 
Таким образом, вы можете стилизовать элемент совершенно по-разному в зависимости от состояния этого флажка, который вы даже не видите. Довольно аккуратно. Давайте посмотрим на кучу вещей, которые может сделать «Checkbox Hack».
 
6. CSS свойство appearance для Checkbox
 
Свойство appearance (-webkit-appearance, -moz-appearance) из каскадных таблиц стилей со значением none убирает стандартное оформление элемента, но его возможности (включение-выключение, например) сохраняются, а это уже позволяет задать ему любые стили, не используя такие хаки. Пример:
 
<input type="checkbox" id="highload4" name="highload4">
<style>
#highload4 {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 25px;
    background-color: red;
    border-radius:10%;
}
#highload4:checked {
    background-color: green;
}
#highload4:checked:before {
    content:"\2713";
    color: white;
    padding: initial;
    font-weight: bold;
}
</style>
 
Как выглядят отмеченный и не отмеченный флажки с такими стилями в браузере Google Chrome версии 98:
 
 
 
   
  
  
Обратите внимание, что это свойство является экспериментальным, а значит, его поддерживают далеко не все браузеры.
 
Заключение
 
Вот и все, после изучения примеров данной статьи вы сможете создавать чекбоксы какого угодно внешнего вида. Чаще всего для кастомизации используют галочки, либо же приводят визуально к похожести на включатели-выключатели — круглые, квадратные.
 
Напоследок стоит отметить, что все же не стоит увлекаться чрезмерным изменением внешнего вида любых элементов HTML-разметки. Пользователь должен все же понимать, что имеет дело именно с переключателем, а не пытаться угадать, что это такое диво дивное.
 
Также необходимо учитывать, чтобы чекбокс вписывался в общий дизайн, в общую идею сайта. Например, для веб-ресурса серьезной компании, выдержанного в черно-белых тонах, совсем не подойдет флажок в виде летящего дракона — клиенты вряд ли оценят. Но это уже дело дизайнеров и владельцев веб-ресурса, а не программистов и верстальщиков.