Стилизация форм Checkbox и Radio на обычном CSS
Стандартные страшные, поэтому с помощью CSS можно легко сделать их более менее симпотными.
Используем их везде, где только можно. Работает супер.
Суть работы:
Берем обертку <label> — она сразу кликабельная на весь блок и не нужно писать всякие айдишники. В нее добавляем первым элементом input type=«checkbox» или type=«radio» (визуально делается одинаково, просто в стилях можно указываем загругление для radio 50%).
Дальше идет какой то тег для визуализации галочки. Я использую <i> или <b> так как они короткие. Раньше использовать :before, сейчас от этого ушли.. и так все хорошо работает.
И последнее <span> — тут пишется текст кнопки. Можно использовать любой или вообще без него, но отцентровать будет сложнее.. Если будут ссылки внутри чекбокса или какие то еще элементы, то наверное лучше использовать <div>.
При клике на <label> ставится checked и по средствам CSS ~ (тильда, следующий элемент) стилизируются все следующие элементы.
Стиль CSS для Checkbox
Тут все просто. Еще сделали чтобы текст не выделялся при клике.
/* Чекбокс */
.form-checkbox{
cursor:pointer;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
font-size: 16px;
line-height: 24px;
font-weight:300;
color: #0F1111;
}
.form-checkbox span{
padding-left: 16px;
}
.form-checkbox input[type="radio"],
.form-checkbox input[type="checkbox"]{
display: none;
}
.form-checkbox input[type="radio"] ~ i,
.form-checkbox input[type="checkbox"] ~ i {
content: "";
position: relative;
left: 0;
top: 0;
display: block;
width: 24px;
height: 24px;
background-position: center;
background-repeat: no-repeat;
background-color: #F6F6F6;
border-radius: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor:pointer;
}
.--outline .form-checkbox input[type="radio"] ~ i,
.--outline .form-checkbox input[type="checkbox"] ~ i {
background-color: #fff;
box-shadow:inset 0 0 0 1px #DEDEDE;
}
.form-checkbox:active input[type="radio"] ~ i,
.form-checkbox:active input[type="checkbox"] ~ i {
box-shadow:inset 0 0 0 1px #0F1111;
}
.form-checkbox input[type="checkbox"]:checked ~ i,
.form-checkbox input[type="radio"]:checked ~ i{
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3e%3cpath fill='%23fff' fill-rule='evenodd' d='M11.707.293a1 1 0 0 1 0 1.414L5.041 8.373a1 1 0 0 1-1.414 0L.293 5.04a1 1 0 1 1 1.414-1.414l2.627 2.626 5.959-5.96a1 1 0 0 1 1.414 0Z' clip-rule='evenodd'/%3e%3c/svg%3e");
background-color: #0F1111;
box-shadow:inset 0 0 0 1px #0F1111;
}
.null-checkbox.disabled,
.form-checkbox.disabled{
pointer-events: none;
cursor: default;
}
.null-checkbox.disabled span,
.form-checkbox.disabled span{
color: #A3A4A5 !important;
}
.form-checkbox.disabled input[type="radio"] ~ i,
.form-checkbox.disabled input[type="checkbox"] ~ i {
box-shadow:inset 0 0 0 1px rgba(222, 222, 222, 0.4);
}
Комментарии ()