Как легко создать кастомный checkbox в CSS

В современном мире красивых и необычных дизайнов стилизация многих элементов веб-страницы имеет важное значение. Однако браузеры имеют некоторые стандартные элементы, стили которых тяжело поменять, используя CSS. К таким элементам относятся чекбоксы (переключатели). Как же при этом создать кастомный checkbox CSS, используя свои уникальные стили? Есть очень эффективный способ, о котором мы и поговорим в этой статье.

Принцип создания кастомного checkbox в CSS

Из-за определенных ограничений браузеров применение CSS-стилей к элементам типа checkbox является проблематичным. Различные браузеры имеют свои стандартные стили для чекбоксов (переключателей). Однако для создания уникального дизайна, в котором стили элементов должны быть согласованы, стилизация элемента checkbox просто необходима.

Как же нужно верстать чекбоксы, чтобы обойти ограничения браузеров? Для этого используется связь переключателя с его меткой label. Переключение флажка элемента checkbox осуществляется не только по нажатию на сам элемент, но и на метку label, с которой установлена связь. Эту связь можно создавать двумя способами:

• поместить элемент input с типом checkbox внутрь тега label;
• добавить элементу input идентификатор со значением, равным значению атрибута for тега label.

Примерно такие связи выглядят так:

<!-- Помещение input внутрь label -->
<label>
  <input type="checkbox">Второй
</label>

<!-- Применение идентификатора -->
<input type="checkbox" id="second">
<label for="second">Второй</label>

Так как переключение флажка осуществляется по клику на label, использовать стандартный чекбокс нам уже нет нужды. Мы можем его просто скрыть, а вместо него сверстать собственный стилизованный чекбокс. В этом случае мы сможем использовать возможности CSS максимально. Флажок можно добавить с помощью любого изображения и показывать этот флажок, когда скрытый стандартный чекбокс получает состояние checked (включен). Эта зависимость создается с помощью CSS. Включается и выключается флажок при клике на область тега label.

Таким образом, выделим несколько главных шагов для создания кастомного элемента checkbox:

• создаем связь стандартного чекбокса с его меткой label;
• скрываем стандартный input;
• верстаем собственный чекбокс;
• стилизуем свой новый элемент в состоянии checked.

Далее подробно разберем каждый из шагов и продемонстрируем поэтапное создание кастомного чекбокса на примере.

Верстка кастомного checkbox в CSS

Для верстки стилизованного переключателя сперва создадим input с типом checkbox и метку label. Свяжем два элемента с помощью идентификатора myCheckbox:

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Мой чекбокс</label>

Благодаря идентификатору, чекбокс переключается при клике на label. На текущий момент результат таков:

Теперь добавим тегу input класс, с помощью которого будем стилизовать наш чекбокс:

<input type="checkbox" id="myCheckbox" class="demoCustomCheckbox">
<label for="myCheckbox">Мой чекбокс</label>

Нам достаточно иметь один класс — у элемента input. Стилизацию элемента label будем проводить, отталкиваясь от связанного с ним input. Таким образом, мы сможем легко добавить любому стандартному чекбоксу наши стили, просто установив ему класс demoCustomCheckbox.

Скрытие оригинального чекбокса

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

.demoCustomCheckbox {
    display: none;
}

Теперь визуально на странице находится только текст label:

После этого на замену стандартному сверстаем псевдочекбокс, стили которого при изменении состояния (включен/выключен) будут зависеть от изменения состояния скрытого переключателя.

Создание псевдочекбокса

Стилизовать элемент label мы будем, используя комбинирование селекторов, в частности, комбинацию «соседний селектор».

О комбинировании CSS-селекторов можно почитать в этой статье.

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

.demoCustomCheckbox + label {
    position: relative;
    padding-left: 30px;
    height: 1.5em;
    display: flex;
    align-items: center;
    color: #000;
    cursor: pointer;
    user-select: none;
}

Здесь мы задали некоторые стили для самого текста label. Мы установили относительное позиционирование (position: relative;) и сделали отступ слева (padding-left: 30px;) — эти стили нам понадобятся для размещения кастомного чекбокса в области label. Отцентрировали текст по высоте (display: flex; align-items: center;), задали черный цвет текста (color: #000), стиль курсора в виде руки (cursor: pointer;) и запретили пользователю выделять текст (user-select: none;).

Теперь создадим сам чекбокс. Сделаем это с помощью псевдоэлемента before тега label:

.demoCustomCheckbox + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid #ccc;
}

Зададим абсолютное позиционирование псевдоэлемента относительно левой и верхней границы label (position: absolute; left: 0; top: 0;). Установим размер чекбокса (width: 1.4em; height: 1.4em;) и нарисуем ему границу серого цвета (border: 1px solid #ccc;).

В итоге мы получим стилизованный чекбокс пока без возможности переключения:

Далее добавим галочку для переключателя.

Добавление галочки

Для добавления галочки нам понадобится ее изображение в любом формате: base64 либо ссылки на SVG, PNG, JPG. В нашем примере будем использовать ссылку на изображение формата PNG.

С помощью псевдокласса checked добавим стили псевдоэлементу before элемента label, который находится сразу после чекбокса с включенным состоянием (checked):

.demoCustomCheckbox:checked + label::before {
    border-color: #00b50e;
    background-image: url('/wp-content/uploads/2023/11/checkbox_checked.png');
    background-size: contain;
}

Используя свойства border-color, изменим цвет границы включенного переключателя. Изображение добавим в виде фона, используя background-image, вместив всю картинку в пределы чекбокса (background-size: contain;).

В итоге мы имеем различные стили для кастомного элемента checkbox при включенном и выключенном состоянии. Нажимая на новый переключатель либо на его лейбл, мы вызываем переключение скрытого стандартного чекбокса. И, в зависимости от состояния скрытого переключателя, мы стилизуем наш собственный чекбокс, используя комбинирование CSS-селекторов. Теперь у нас есть возможность переключать кастомный чекбокс (кликайте на элемент):

Далее речь пойдет о добавлении стилей для состояний hover, focus, active и disabled нового переключателя.

Стилизация псевдочекбокса для состояний hover, focus, active и disabled

Для улучшения интерактивности и лучшего визуального восприятия при взаимодействии с нашим новым чекбоксом добавим ему различные стили для состояний hover (при наведении), focus (фокус установлен на элементе), active (в момент нажатия на элемент) и disabled (деактивирован).

В деактивированном (disabled) состоянии к чекбоксу не могут быть применены стили других состояний. Поэтому стили для состояний hover и active мы будем устанавливать только в том случае, если переключатель не имеет псевдокласс disabled (:not(:disabled)). Для состояния focus это не требуется, так как фокус и так не может быть установлен на деактивированный элемент. Помимо этого, мы не будем применять стили при наведении на элемент в состоянии checked (галочка установлена).

CSS-код будет таким:

/* Наведение */
.demoCustomCheckbox:not(:disabled):not(:checked) + label:hover::before {
    border-color: #00b50e;
}

/* Фокус */
.demoCustomCheckbox:focus + label::before {
    box-shadow: 0 0 3px 3px rgba(0, 215, 6, 0.4);

}

/* Момент нажатия */
.demoCustomCheckbox:not(:disabled) + label:active::before {
    box-shadow: 0 0 3px 3px rgba(0, 215, 6, 0.4);
}

/* Деактивирован */
.demoCustomCheckbox:disabled + label {
    color: #aaa;
    cursor: not-allowed;
}

.demoCustomCheckbox:disabled + label::before {
    border-color: #ccc;
}

.demoCustomCheckbox:disabled:checked + label::before {
    background-image: url('/wp-content/uploads/2023/11/checkbox_disabled.png');
}

В коде выше мы используем свойство border-color для установки цвета границ и добавляем тени, используя box-shadow. Кроме того, элементу в состоянии disabled мы задаем серый цвет текста метки label, новое изображение галочки (background-image) и меняем стиль курсора (cursor: not-allowed;), который сообщает пользователю, что с чекбоксом нельзя взаимодействовать.

Результат при отсутствии атрибута disabled:

Результат при наличии атрибута disabled:

Результат при наличии атрибутов checked и disabled:

Кастомный чекбокс готов! Весь код примера:

<input type="checkbox" id="myCheckbox" class="demoCustomCheckbox">
<label for="myCheckbox">Мой чекбокс</label>

.demoCustomCheckbox {
    display: none;
}

.demoCustomCheckbox + label {
    position: relative;
    padding-left: 30px;
    height: 1.5em;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.demoCustomCheckbox + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.demoCustomCheckbox:checked + label::before {
    border-color: #00b50e;
    background-image: url('/wp-content/uploads/2023/11/checkbox_checked.png');
    background-size: contain;
}

.demoCustomCheckbox:not(:disabled):not(:checked) + label:hover::before {
    border-color: #00b50e;
}

.demoCustomCheckbox:focus + label::before {
    box-shadow: 0 0 3px 3px rgba(0, 215, 6, 0.4);

}

.demoCustomCheckbox:not(:disabled) + label:active::before {
    box-shadow: 0 0 3px 3px rgba(0, 215, 6, 0.4);
}

.demoCustomCheckbox:disabled + label {
    color: #aaa;
    cursor: not-allowed;
}

.demoCustomCheckbox:disabled + label::before {
    border-color: #ccc;
}

.demoCustomCheckbox:disabled:checked + label::before {
    background-image: url('/wp-content/uploads/2023/11/checkbox_disabled.png');
}

Далее рассмотрим альтернативный пример чекбокса с интересной стилизацией.

Чекбокс-слайдер

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

HTML:

<input type="checkbox" id="toggleCheckbox" class="demoToggleCheckbox">
<label for="toggleCheckbox"></label>

CSS:

.demoToggleCheckbox {
    display: none;
}

.demoToggleCheckbox + label {
    display: inline-block;
    width: 60px;
    height: 34px;
    background-color: #ccc;
    border-radius: 17px;
    position: relative;
    cursor: pointer;
}

.demoToggleCheckbox + label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.3s;
}

.demoToggleCheckbox:checked + label {
    background-color: #33c53e;
}

.demoToggleCheckbox:checked + label:after {
    transform: translateX(26px);
}

Результат:

Заключение

Некоторые ограничения браузеров осложняют возможность применять стили к элементу input типа checkbox напрямую. Поэтому для создания своего стилизованного чекбокса можно воспользоваться способом, когда стандартный переключатель скрывается, а вместо него верстается псевдочекбокс. При этом интерактивность такого чекбокса задается с помощью связи этого элемента с меткой label. Используя такой подход, можно создавать переключатели абсолютно разных стилей, ограничивая себя только собственной фантазией.