

Стилизация чекбокса
Рассмотрим стилизацию чекбоксов с помощью CSS. А также рассмотрим, как реализовать отметку чекбокса картинкой.
Стилизация чекбокса
Создадим input с типом checkbox и элемент, который будет новым чекбоксом .mycheckbox__new. Затем обернём их в label чтобы связать label и input. Это необходимо для того чтобы при нажатии на текст, изменялось состояние чекбокса.
<label class="mycheckbox">
<input class="mycheckbox__default" type="checkbox">
<div class="mycheckbox__new"></div>
<div class="mycheckbox__descr">Чекбокс</div>
</label>
Стилизуем новоиспечённый чекбокс: скроем стандартный input и при помощи оператора + в состоянии :checked будем закрашивать чекбокс.
/* Стилизация чекбокса */
.mycheckbox {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mycheckbox__default {
display: none;
}
.mycheckbox__default:checked + .mycheckbox__new::after {
height: 25px;
width: 25px;
border-radius: 4px;
}
.mycheckbox__new {
width: 25px;
height: 25px;
border-radius: 4px;
border: 1px solid #222;
margin-right: 9px;
position: relative;
}
.mycheckbox__new::after {
content: "";
display: block;
width: 0;
height: 0;
background: #2f4857;
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
/* /стилизация чекбокса */
SASS
// Стилизация чекбокса
.mycheckbox
cursor: pointer
display: flex
align-items: center
user-select: none
&__default
display: none
&:checked + .mycheckbox__new::after
height: 25px
width: 25px
border-radius: 4px
&__new
width: 25px
height: 25px
border-radius: 4px
border: 1px solid #222
margin-right: 9px
position: relative
&::after
content: ""
display: block
width: 0
height: 0
background: #2f3856
left: 50%
top: 50%
position: absolute
transform: translate(-50%, -50%)
transition: 0.2s ease-in
// /стилизация чекбокса
Чекбокс картинкой
Для того чтобы реализовать чекбокс картинкой, в свойстве background добавим background-image. Я вставлю SVG-изображение прямо в CSS код используя base64
.mycheckbox__new::after {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNTAiIGhlaWdodD0iNTAiCnZpZXdCb3g9IjAgMCA1MCA1MCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48cGF0aCBkPSJNIDQxLjkzNzUgOC42MjUgQyA0MS4yNzM0MzggOC42NDg0MzggNDAuNjY0MDYzIDkgNDAuMzEyNSA5LjU2MjUgTCAyMS41IDM4LjM0Mzc1IEwgOS4zMTI1IDI3LjgxMjUgQyA4Ljc4OTA2MyAyNy4yNjk1MzEgOC4wMDM5MDYgMjcuMDY2NDA2IDcuMjgxMjUgMjcuMjkyOTY5IEMgNi41NjI1IDI3LjUxNTYyNSA2LjAyNzM0NCAyOC4xMjUgNS45MDIzNDQgMjguODY3MTg4IEMgNS43NzczNDQgMjkuNjEzMjgxIDYuMDc4MTI1IDMwLjM2MzI4MSA2LjY4NzUgMzAuODEyNSBMIDIwLjYyNSA0Mi44NzUgQyAyMS4wNjI1IDQzLjI0NjA5NCAyMS42NDA2MjUgNDMuNDEwMTU2IDIyLjIwNzAzMSA0My4zMjgxMjUgQyAyMi43NzczNDQgNDMuMjQyMTg4IDIzLjI4MTI1IDQyLjkxNzk2OSAyMy41OTM3NSA0Mi40Mzc1IEwgNDMuNjg3NSAxMS43NSBDIDQ0LjExNzE4OCAxMS4xMjEwOTQgNDQuMTUyMzQ0IDEwLjMwODU5NCA0My43ODEyNSA5LjY0NDUzMSBDIDQzLjQxMDE1NiA4Ljk4NDM3NSA0Mi42OTUzMTMgOC41ODk4NDQgNDEuOTM3NSA4LjYyNSBaIj48L3BhdGg+PC9zdmc+")
no-repeat center / 95%;
}
Аналогично стилизуется input типа радио
Если вам понравилась данная статья, рекомендую прочитать про стилизацию select
English | Russian |
---|---|
Input | Ввод (данных) |
Checkbox | Флажок |
Label | Ярлык, метка |
Before | До, перед |
Checked | Проверен, проверено |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.