Приклад оформлення 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.