Всем известно что input[type="checkbox"] и input[type="radio"] очень плохо поддаются стилизации, но существует лайфхак, который на самом деле стилизует не сам инпут, а элементы находящиеся за ним, которые мы можем стилизовать в зависимости от состояния :checked для наших checkbox и radio. И будет это выглядеть так, как будто стилизованы сами инпуты.
Для начала стилизуем checkbox. Для этого выведем вот такой HTML-код:
<label>
<input type="checkbox" name="name" value="value" />
<span>описание для чекбокса</span>
</label>
Т.к. сам checkbox стилизовать не получится, то скрываем его с помощью правил CSS.
<style>
input[type="checkbox"] {
display: none;
}
</style>
Как вы уже заметили, то сразу за инпутом я разместил тег <span>, именно над ним мы и будем работать. Т.к. он стоит сразу за инпутом, то с помощью оператора "+" мы легко создадим для него селектор.
Неактивный checkbox состоит из квадратной рамки. Ее мы реализуем с помощью псевдо элемента ::before внутри нашего <span>
Получаем вот такой CSS-код:
<style>
/* span который находится сразу за инпутом */
input[type="checkbox"] + span {
display: inline-block;
position: relative;
padding-left: 1.5em;
}
/* псевдо элемент внутри */
input[type="checkbox"] + span::before {
content: "";
position: absolute;
left: 0;
top: 0.1em;
width: 1em;
height: 1em;
border: 1px solid #000;
border-radius: 0;
}
</style>
У нас вывелась рамка слева от описания, которая очень напоминает неактивный чекбокс. Я ее сделал просто черным бордером, но при желании вы можете стилизовать как угодно, или например разместить картинку фоном с помощью background.
Теперь нам нужно сделать что бы при клике на него появлялась/снималась галка. Ее мы реализуем с помощью псевдо элемента ::after, который появляется только когда наш input в состоянии :checked. Галку я реализовал с помощью кода "\2713".
<style>
/* псевдо элемент размещенный внутри span, который стоит за чекбоксом в состоянии :checked */
input[type="checkbox"]:checked + span::after {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: #ff151e;
line-height: 1em;
font-weight: 600;
width: 1em;
text-align: center;
}
</style>
Полный CSS-код для стилизации checkbox будет выглядеть вот так:
<style>
input[type="checkbox"] + span {
display: inline-block;
position: relative;
padding-left: 1.5em;
}
input[type="checkbox"] + span::before {
content: "";
position: absolute;
left: 0;
top: 0.1em;
width: 1em;
height: 1em;
border: 1px solid #000;
border-radius: 0;
}
input[type="checkbox"]:checked + span::after {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: #ff151e;
line-height: 1em;
font-weight: 600;
width: 1em;
text-align: center;
}
</style>
А вот сам рабочий пример для стилизации нашего input[type="checkbox"]:
Аналогичным способом стилизуем input[type="radio"].
Для этого выведем вот такой HTML-код (обернул в дивы что бы каждый radio располагался на отдельной строке):
<div>
<label>
<input type="radio" name="name" value="value1" checked />
<span>описание для radio 1</span>
</label>
</div>
<div>
<label>
<input type="radio" name="name" value="value2" />
<span>описание для radio 2</span>
</label>
</div>
<div>
<label>
<input type="radio" name="name" value="value3" />
<span>описание для radio 3</span>
</label>
</div>
Полный CSS-код для стилизации radio будет выглядеть вот так:
<style>
input[type="radio"] + span {
display: inline-block;
position: relative;
padding-left: 1.5em;
}
input[type="radio"] + span::before {
content: "";
position: absolute;
left: 0;
top: 0.1em;
width: 1em;
height: 1em;
border: 1px solid #000;
border-radius: 50%;
}
input[type="radio"]:checked + span::after {
content: "";
position: absolute;
left: 3px;
top: calc(0.1em + 3px);
background-color: #ff151e;
width: calc(1em - 6px);
height: calc(1em - 6px);
border-radius: 50%;
}
</style>
А вот сам рабочий пример для стилизации наших input[type="radio"]: