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

Оглавление

• Оформление чекбокса
  • CSS-стили для чекбокса
• Оформление radio-кнопки
  • CSS-стили для радио-кнопки

Стилизация 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.