Дата публикации
8 Апреля 2019
Дата изменения
24 Сентября 2019
Уникальных просмотров
3.683

Оглавление

Стилизация checkbox и radio кнопок является очень распространенной практикой в web-дизайне. В этой статье я покажу как применив CSS, стилизовать данные элементы кроссбраузерно.

Для начала определимся с логикой, что нам нужно учитывать при стилизации чекбоксов и радио-кнопок:

  1. Помимо самих элементов которые мы будем стилизовать (<input type="checkbox"> и <input type="radio">), нам понадобится тег <label>, благодаря которому переключать элемент можно будет кликая на текст, а не только на сам элемент.
  2. Тег <input> должен находиться до тега <label> . В этом случае состояние элемента формы переключается с помощью атрибута for.

«Магия» заключается в использовании псевдоселекторов :checked и :not. При этом сам чекбокс или радио-кнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов :before и :after для тега <label>.

Оформление чекбокса

HTML разметка для чекбокса будет выглядеть следующим образом:

<!-- Стилизация checkbox  -->
<div class="element-wrapper">
    <input type="checkbox" class="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox 1</label>
</div>

<div class="element-wrapper">
    <input type="checkbox" class="checkbox" id="checkbox2" />
    <label for="checkbox2">Checkbox 2</label>
</div>

Еще раз — тег <input> обязательно должен быть расположен перед тегом <label>. Если вы поменяете их местами, ничего работать не будет.

CSS-стили для чекбокса:

.element-wrapper {
    padding: 10px;
}

/* 
//////////////////////
Стилизация checkbox 
//////////////////////
*/

.checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox + label {
    position: relative;
    vertical-align: middle;
    padding: 0 0 0 30px;
    cursor: pointer;
}

/* Чекбокс в состоянии неактивен */
.checkbox + label:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 19px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
}

/* Чекбокс в состоянии активен */
.checkbox + label:after {
    content: '';
    position: absolute;
}

/* Фон чекбокса в состоянии активен */
.checkbox:checked + label:after {
    position: absolute;
    top: 2px;
    left: 3.2px;
    border: 1px solid white;
    background: #413548;
    height: 14px;
    width: 14px;
}

Результат:

Смотреть пример Оформление чекбокса от webinmind.ru (@webinmind).

Оформление radio-кнопки

HTML разметка для радио-кнопок будет выглядеть следующим образом:

<!-- Стилизация radio  -->
<div class="element-wrapper">
    <input type="radio" class="radio" name="radio" id="radio1" />
    <label for="radio1">Radio 1</label>
</div>

<div class="element-wrapper">
    <input type="radio" class="radio" name="radio" id="radio2" />
    <label for="radio2">Radio 1</label>
</div>

И опять — тег <input> обязательно должен быть расположен перед тегом <label>.

CSS-стили для радио-кнопки:

.element-wrapper {
    padding: 10px;
}

/* 
//////////////////////
Стилизация radio 
//////////////////////
*/

.radio {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 7px;
}

.radio + label {
    position: relative;
    padding: 0 0 0 30px;
    cursor: pointer;
}

/* Оформление радио-кнопки */
.radio + label:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #FFF;
}

/* Радио в состоянии неактивен */
.radio + label:after {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 3.5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #413548;
    opacity: 0;
    transition: .2s;
}

.radio:checked + label:after {
    opacity: 1;
}

Результат:

Смотреть пример Оформление radio-кнопки от webinmind.ru (@webinmind).

Вот таким образом можно кроссбраузерно стилизовать стандартный вид чекбоксов и радио-кнопок, применив при этом только лишь инструмент CSS. Кстати, рекомендую прочитать статью про кастомизацию скроллбара браузеров на движке WebKit.

Благодарность автору

Если по какой-либо причине вы хотите поблагодарить автора данного ресурса, вы можете это сделать одним из удобных для вас способов ниже.

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1220 s
Время запросов: 0,1220 s
Количество запросов: 25
Источник: cache