Вчера делал имплементацию дизайна для одного клиента, так вот, в дизайне был кастомный чекбокс (думаю, не нужно объяснять, что это такое). Порылся в Тырнете, нашел простой способ это сделать.
Прикреплю сразу спрайт с двумя состояниями input. 
Логика в том, что для чекбокса нужен label, связанный с ним через атрибут for:
|
1 2 |
<input id="my_check" type="checkbox" /> <label for="my_check">Checkbox label</label> |
С помощью CSS отключаем видимость чекбокса и добавляем для label псевдоэлемент с фиксированными размерами, для которого ставим бекграундом наш спрайт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
input[type="checkbox"] { display: none; } input[type="checkbox"] + label { cursor: pointer; padding-left: 0; } input[type="checkbox"] + label::before { content: ""; display: inline-block; height: 22px; width: 24px; margin: 0 5px 0 0; background: url("checkboxes.png"); } input[type="checkbox"]:checked + label::before { background-position: 0 -22px; } |
Для состояния «checked» просто изменяем позиционирование спрайта.
Как-то так. Конечно, этот прием можно использовать не только для чекбоксов, но и для radio-переключателей.
UPD.: Вот статья, где я обошелся без спрайта — застилил все под iOS ;)
Спасибо — помогла! Кратко и по делу, ничего лишнего. ))
Просто, и классно, спасибо Вам!
Анимированные чекбоксы смотрятся намного эффектней