Стилизация checkbox. Кастомные чекбоксы
Стилизация checkbox — то, с чем сталкивается каждый начинающий верстальщик. Часто это становится проблемой и занимает много времени. Но после этого урока вы сможете делать кастомные чекбоксы любого вида. Суть любого стилизованного чекбокса — спрятать оригинальные чекбокс, и активировать его с помощью клика на . Если вы сможете понять принцип работы, в дальнейшем у вас не возникнет сложностей со стилизацией чекбоксов и радио кнопок. Большим преимуществом описанного метода является то, что мы не лишаемся стандартной валидации и не возникает никаких проблем при отправке формы. Мы по максимуму используем встроенный в браузер функционал, что всегда хорошо.
Если вы сразу хотите посмотреть готовый код и пример — добро пожаловать на codepen .
Стилизация checkbox — HTML разметка
Как я и говорил, основная суть в создании кастомных чекбоксов — скрыть оригинальный чекбокс и создать свой, со своим дизайном и активированным состоянием. HTML код не очень сложный, описывать там нет особо чего, поэтому я просто оставлю комментарии в нем. Единственное, что нужно уточнить — я использую код svg иконки, вы же можете использовать любую картинку в этом месте с помощью тега , или вообще текст.
CSS код для создания кастомного чекбокса
Для css кода так же оставлю комментарии. Как видно, оригинальный чекбокс мы скрываем совсем. Далее элемент .checkbox стилизуем под сам чекбокс. Иконку просто выравниваем по центру и скрываем её. Далее указываем, что при активированном чекбоксе иконка должна отображаться. Как и говорилось раньше, активироваться чекбокс будет за счет
.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, с радостью всем помогу.
Так же буду очень благодарен, если вы ознакомитесь с другими уроками:
Семенюк Назарий
Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)
Кастомный чекбокс с ~ и :checked
Поэтому хочу рассказать, как это работает. Вот пример конечного результата:
Подготовительный этап:
Поскольку я не знаю уровень владения HTML и CSS у читателя статьи, я посчитал нужным упомянуть 3 момента: 1) Селектор элемент1~элемент2 (пример: div~p) выберет все элементы p, находящиеся в коде за элементом div
2) Label и input можно связывать друг с другом, чтобы input[type=’checkbox’] реагировал на нажатие на label. Если input находится внутри label, то он будет менять свое состояние при клике на label (становиться :checked и наоборот). Подробнее об этом вот здесь .
3) Вид в отжатом/нажатом состоянии будет менять div с классом .custom-check-icon
Алгоритм:
Шаг 1
Сначала создадим верстку без стилей: у нас будет div-обертка, а внутри checkbox и нужный нам текст. Добавим стилей чтобы выровнять все правильным образом:
HTML:
CSS:
Результат:
Шаг 2
Кастомизируем конечный вид чекбокса с помощью псевдоэлемента ::before:
CSS:
.custom-check-icon::before
Результат:
Шаг 3
Теперь сделаем таким образом, чтобы наш маленький фиолетовый квадратик отображался только в том случае, когда наш input:checked:
CSS:
label input:checked ~ .custom-check-icon::before
Результат:
Шаг 4
Все что нам остается — скрыть наш input:
CSS:
Конечный результат:
Итог
Вот таким образом можно сделать кастомный чекбокс. Хочу отметить, что это всего лишь один из вариантов, они могут: отличаться, например, input может быть не внутри label, а рядом, а также вместо псевдоэлемента ::before можно использовать background-image (именно так можно сделать чекбокс с превьюшки поста)
Делаем кастомный чекбокс (checkbox) на HTML и CSS
Значит так, задача очень простая сделать современный и кастомный чекбокс по средствам CSS и HTML. Без использования javascript. Причем кастомизировать его можно будет как угодно.
Для начала нам нужна обертка, пусть это будет обычный div. Внутрь мы положим input = checkbox, естественно label он будет выступать в качестве триггера. И рядом обыкновенный span элемент.
Логика простая, скрываем инпут, растягиваем label на 100% по ширине и высоте, а span будем заливать фоном по клику на label. Точнее даже не по клику, а по состоянию инпута.
Демо чекбокса:
Пример кода:
Стили
.checkbox-wrapper < width: 40px; height: 40px; border: 2px solid gray; margin: 30px auto; border-radius: 5px; display: flex; align-items: center; justify-content: center; position: relative; background: white; >.checkbox-wrapper input < display: none; >.checkbox-wrapper label < width: 100%; height: 100%; display: block; background: transparent; cursor: pointer; visibilty: hidden; position: absolute; z-index: 10; >.checkbox-wrapper span < width: 25px; height: 25px; display: inline-block; border-radius: 25px; >.checkbox-wrapper #modern-checkbox:checked+span
Кастомный checkbox средствами HTML и CSS (no-js) #1
На одном из собеседований мне попалось интересное задание на верстку:
Средствами html и css напишите кастомный checkbox таким образом, чтобы оригинальное изображение checkbox’a не отображалось, но сохранялся весь функционал (checked — unchecked). Вместо оригинального изображения checkbox’a должно быть кастомное изображение или текст, отображающие текущее состояние checkbox’a и обеспечивающие соответствующий функционал.
Где-то в подсознании я вспомнил про псевдоэлементы, но даже с гуглом не смог справиться с заданием за 5 минут, после чего со мной прекратили диалог «до обратной связи». Но я не расстраиваюсь, а беру на вооружение и улучшаю свой скилл, поэтому: существует два способа создания кастомных checkbox’ов.
Способ 1
Подходит для разметки, в которой связан с через id и for :
type="checkbox">
Последовательность элементов важна, т.к. от нее будут зависеть выражения для выбора элементов в CSS.
Скрываем input
.custom-checkbox position: absolute;
z-index: -1;
opacity: 0;
>
Преимущество данного способа перед display: none заключается в сохранении возможности получить состояние фокуса для дальнейшей стилизации input .
Создаем поддельный checkbox
.custom-checkbox + label cursor: pointer;
display: inline-flex;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>.custom-checkbox + label::before content: '';
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
flex-grow: 0;
border: 1px solid #c3c3c3;
border-radius: 0.25em;
margin-right: 0.5em;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
>
Сначала вертикально центрируем флажок с подписью с помощью align-items: center для flex-контейнеров.
С помощью псевдоэлемента ::before создаем имитацию checkbox’а. Отрисуем его границы для постоянной видимости. Правила background -repeat, -position и -size определяют положение флажка в состоянии checked .
Меняем отображение псевдоэлемента в состоянии checked
.custom-checkbox:checked + label::before border-color: blue;
background-color: blue;
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");
>
Стилизуем checkbox в остальных его состояниях: hover, active, focus и disabled
.custom-checkbox:not(:disabled):not(:checked) + label:hover::before border-color: rgba(0, 0, 255, 0.33);
>.custom-checkbox:not(:disabled):active + label::before background-color: rgba(0, 0, 255, 0.66);
>.custom-checkbox:focus + label::before box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.125);
>.custom-checkbox:focus:not(:checked) + label::before border-color: #c3c3c3;
>.custom-checkbox:disabled + label::before background-color: black;
>
Способ 2
Подходит для разметки, в которой расположен внутри :
В данном случае необходимо добавить после :
Создадим более простой checkbox без учета всех состояний и с задаваемой позицией рисунка.
.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 input position: absolute;
z-index: -1;
opacity: 0;
>
Рисуем кастомный checkbox в :
.checkmark position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
>
Стилизуем в состоянии hover и в состоянии checked :
.container:hover input ~ .checkmark background-color: #ccc;
>.container input:checked ~ .checkmark background-color: #2196F3;
>
Добавляем псевдоэлемент для отображения рисунка:
.checkmark:after content: "";
position: absolute;
display: none;
>.container input:checked ~ .checkmark:after display: block;
>.container .checkmark:after left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
>
Аналогично можно стилизовать и .
Примеры
Итого
Мы научились пользоваться псведоэлементами, селекторами состояний и соседних элементов в CSS. Надеюсь, эта информация поможет тебе!