В CSS3 появился способ стилизации чекбоксов без JavaScript

Стилизация чекбоксов и радиокнопок средствами CSS3Виновником торжества является новый псевдокласс :checked, он дает возможность полного контроля за стилями чекбоксов и радиокнопок. Рассмотрим простой пример.

Демонстрация. Исходники.

Приступим. Создадим обычный чекбокс:

<input id="c1" type="checkbox" name="cc" />
<label for="c1">Check Box 1</label>

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

Спрайт для стилизации чекбокса и радиокнопки

Вот таким образом:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

Теперь немного "тюнинга" для работоспособности.Нам надо обработать клики, чтобы изображение менялось.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Результат:
Стилизация checkbox и radiobutton средствами CSS3
Кроссбраузерность:

Вся эта кухня будет исправно работать везде за исключением IE9 и ниже, а так же iOS-ный Safari до 6 версии.
При этом, в IE чекбоксы и радиокнопки будут отображаться как обычно (без стилизации), т.е. форма останется работоспособной.

Источник вдохновения:
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

Поделитесь с друзьями:



Один комментарий к “В CSS3 появился способ стилизации чекбоксов без JavaScript

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>