Отправить заявку

Пример оформления checkbox на чистом CSS

В наше время использовать JavaScript для украшения разного рода input полей уже считается плохим тоном. Современные HTML5 и CSS3 дают широчайшие возможности в этом плане. Например, легко можно реализовать свой собственный чекбокс с любым дизайном.

Пример давно был найден на просторах Интернета но в то время он работал только в одном браузере "корпорации Добра". Теперь же он прекрасно работает во всех браузерах (не считаю умирающих, древних ИЕ).

Нам понадобится подготовленные изображения самого чекбокса (сделаем sprite из них) . На примере показана стилизация чекбоксов под MacOS.

HTML:

<input type="checkbox" id="checkbox-id" />
<label for="checkbox-id">
Название
</label>

CSS:

input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
 
input[type="checkbox"] + label {
    background: url(sprite.gif) 0 0 no-repeat;
    padding-left: 20px;
}
 
input[type="checkbox"]:checked + label {
    background-position: 0 -32px;
}

Первым правилом прячем настоящий чекбокс.
Вторым, добавляем для соседнего лэйбла фон с нарисованным чекбоксом.
Третьим правилом меняем фон лэйбла если чекбокс к которому он привязан находится в состоянии checked

Другие публикации