Стилизация checkbox и radio

Стилизуем input[type="checkbox"] и input[type="radio"] на чистом CSS, без JavaScript

Всем известно что 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"]:

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"]:

radio

Теги: Вeрстка, CSS, HTML, checkbox, radio, ::before, ::after, Псевдоэлемент