Стилизация чекбокса
Рассмотрим стилизацию чекбоксов с помощью CSS. А также рассмотрим, как реализовать отметку чекбокса картинкой.
Стилизация чекбокса
Создадим input с типом checkbox и элемент, который будет новым чекбоксом .mycheckbox__new. Затем обернём их в label чтобы связать label и input. Это необходимо для того чтобы при нажатии на текст, изменялось состояние чекбокса.
<label class="mycheckbox">
<input class="mycheckbox__default" type="checkbox">
<span class="mycheckbox__new"></span>
<span class="mycheckbox__descr">Чекбокс</span>
</label>
Стилизуем новоиспечённый чекбокс: скроем стандартный input и при помощи оператора + в состоянии :checked будем закрашивать чекбокс.
/* Стилизация checkbox */
.mycheckbox {
cursor: pointer;
display: flex;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-bottom: 0;
margin-right: 40px;
}
.mycheckbox__default {
display: none;
}
.mycheckbox__new {
width: 24px;
height: 24px;
background: #FFFFFF;
background: #FFFFFF;
border: 1px solid rgba(59, 50, 95, 0.1);
border-radius: 7px;
margin-right: 10px;
position: relative;
display: block;
flex-shrink: 0;
}
.mycheckbox__new::after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" %3E%3Cpath d="M1 9.5L5 13L14.5 1.5" stroke="%233AB7F6" stroke-width="3"/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: block;
width: 0;
height: 0;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
transition: 0.11s ease-in;
}
.mycheckbox__default:checked + .mycheckbox__new::after {
height: 15px;
width: 13px;
border-radius: 50%;
}
/* /стилизация чекбокса */
Для того чтобы реализовать чекбокс картинкой, мы добавили свойство background-image. Можно вставить изображение прямо в CSS код используя SVG.
Стилизация checkbox с помощью appearance
Теперь рассмотрим как стилизовать checkbox, благодаря свойству appearance.
Структура.
<input type="checkbox" class="checkbox">
Стили для checkbox.
.checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 4px;
border: 1px solid #d6d6cd;
width: 18px;
height: 19px;
cursor: pointer;
position: relative;
}
.checkbox::before {
content: "🗸";
color: lightseagreen;
font-size: 18px;
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
opacity: 0;
transition: .1s ease-in;
}
.checkbox:checked::before {
opacity: 1;
}
Стилизация input radio
Аналогично стилизуется input типа радио.
<label class="myradio">
<input class="myradio__default" type="radio" name="Radio input" checked>
<span class="myradio__new"></span>
<span class="myradio__descr">Radio button</span>
</label>
<label class="myradio">
<input class="myradio__default" type="radio" name="Radio input" checked>
<span class="myradio__new"></span>
<span class="myradio__descr">Radio button</span>
</label>
Стили для radio input.
/* Стилизация input type radio */
.myradio {
cursor: pointer;
display: flex;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-bottom: 0;
margin-right: 40px;
}
.myradio__default {
display: none;
}
.myradio__default:checked + .myradio__new::after {
height: 12px;
width: 12px;
border-radius: 50%;
}
.myradio__new {
width: 24px;
height: 24px;
background: #FFFFFF;
border: 1px solid rgba(59, 50, 95, 0.1);
border-radius: 50%;
margin-right: 10px;
position: relative;
display: block;
flex-shrink: 0;
}
.myradio__new::after {
content: "";
display: block;
width: 0;
height: 0;
background: #3ab7f6;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
transition: 0.2s ease-in;
}
/* /стилизация radio */
Если вам понравилась данная статья, рекомендую прочитать про стилизацию select.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (2)
- Евгений
- Only to top