Стилизация checkbox. Кастомные чекбоксы

Стилизация checkbox — то, с чем сталкивается каждый начинающий верстальщик. Часто это становится проблемой и занимает много времени. Но после этого урока вы сможете делать кастомные чекбоксы любого вида. Суть любого стилизованного чекбокса — спрятать оригинальные чекбокс, и активировать его с помощью клика на <label>. Если вы сможете понять принцип работы, в дальнейшем у вас не возникнет сложностей со стилизацией чекбоксов и радио кнопок. Большим преимуществом описанного метода является то, что мы не лишаемся стандартной валидации и не возникает никаких проблем при отправке формы. Мы по максимуму используем встроенный в браузер функционал, что всегда хорошо.

Если вы сразу хотите посмотреть готовый код и пример — добро пожаловать на codepen.

Стилизация checkbox — HTML разметка

Как я и говорил, основная суть в создании кастомных чекбоксов — скрыть оригинальный чекбокс и создать свой, со своим дизайном и активированным состоянием. HTML код не очень сложный, описывать там нет особо чего, поэтому я просто оставлю комментарии в нем. Единственное, что нужно уточнить — я использую код svg иконки, вы же можете использовать любую картинку в этом месте с помощью тега <img>, или вообще текст.

<label class="custom-checkbox"> // label нужен для активации чекбокса по клику
    <input class="hidden-checkbox" type="checkbox">
    <div class="checkbox"> // Элемент, который будет стилизован под чекбокс
        <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>
        // SVG - сама иконка чекбокса
        </div>
    Пример текста
</label>

CSS код для создания кастомного чекбокса

Для css кода так же оставлю комментарии. Как видно, оригинальный чекбокс мы скрываем совсем. Далее элемент .checkbox стилизуем под сам чекбокс. Иконку просто выравниваем по центру и скрываем её. Далее указываем, что при активированном чекбоксе иконка должна отображаться. Как и говорилось раньше, активироваться чекбокс будет за счет <label>

.custom-checkbox { // Тут мы просто центрируем чекбокс и текст
    display: flex;
    align-items: center;
}

.custom-checkbox .checkbox {
    margin-right: 10px;
}

.custom-checkbox input {
    -webkit-appearance: none; // Скрываем оригинальный чекбокс
    position: absolute; // После скрытия оставется пустое пространство,
                        // но абсолютное позиционирование это устранит
}

.checkbox { // Тут стилизуем сам чекбокс
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid red;
    background: red;
}

.checkmark { // Тут центритуем и пишем стили для иконки
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    display: none; // Скрываем иконку
}

.custom-checkbox input:checked ~ .checkbox .checkmark {
    display: block; // Показываем иконку, когда чекбокс активен
}

.custom-checkbox input:checked ~ .checkbox {
    background: blue;
    border: 2px solid blue;
    // Если вы хотите не только отображать икнонку, но и менять
    // сам чекбокс после активации - напишите сюда код для активного состояния
}

Как результат получим кастомный чекбокс

Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их в комментариях на YouTube, или пишите мне в Telegram, с радостью всем помогу.

Так же буду очень благодарен, если вы ознакомитесь с другими уроками:

1. Анимация печати текста для сайта | Typed.js
2. Прогресс бар при прокрутке страницы