CSS стилизация checkbox и radio

Стилизуем чекбоксы и радиокнопки с CSS3. Рассмотрим вариант который я использую на своём сайте.

Я уже публиковал урок «Замена стандартного checkbox по средствам CSS3». Прекрасные кнопочки!

В данном примере, как и в том, используется только CSS.

Давай сделаем это!

Я не буду расписывать что и как, а сразу перейду к основным кодам CSS и HTML, которые вам надо просто будет вставить в шаблон или верстку вашего проекта и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.

HTML

<label class="checkbox">
  <input type="checkbox" required="">
    <div class="checkbox__text">Чекбокс переключается кликом по тексту ...</div>
</label>

<label class="checkbox">
  <input type="checkbox" required="">
    <div class="checkbox__text">... или можно кликнуть прямо по чекбоксу</div>
</label>

CSS

.checkbox input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 20px;
}
.checkbox__text {
    position: relative;
    padding: 0 0 0 60px;
    cursor: pointer;
}
.checkbox__text:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}
.checkbox__text:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    transition: .2s;
}
.checkbox input:checked + .checkbox__text:before {
    background: rgba(197, 32, 36, .9);
}
.checkbox input:checked + .checkbox__text:after {
    left: 26px;
}
.checkbox input:focus + .checkbox__text:before {
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7);
}
.radio input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 7px;
}
.radio__text {
    position: relative;
    padding: 0 0 0 35px;
    cursor: pointer;
}
.radio__text:before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #CDD1DA;
    border-radius: 50%;
    background: #FFF;
}
.radio__text:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(197, 32, 36, .9);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
    opacity: 0;
    transition: .2s;
}
.radio input:checked + .radio__text:after {
    opacity: 1;
}
.radio input:focus + .radio__text:before {
    box-shadow: 0 0 0 3px rgba(255,255,0,.7);
}

Всё очень просто! Пользуйтесь! 🎉

---

Автор Целовальников Сергей