Всем привет ☺ Сегодня я хочу показать вам Chekbox`ы, которые позаимствовал с сайта Qiwi.com.

В чём же их особенность? А всё просто: Они не используют никаких картинок и скриптов. Я не стал полностью копировать код с их сайта, но есть небольшие нюансы, которые я решил всё-таки одолжить. Давайте посмотрим стили, которые написаны для checkbox`ов

input[type="checkbox"] {display:none;} /* Прячем Input */
label {cursor: pointer;}
input[type="checkbox"] + label span.check {display:inline-block;width:19px;height:19px;margin:-1px 4px 0 0;vertical-align:middle;border:3px solid #d6d6d6;cursor:pointer;} /* Оформление checkbox`а */
input[type="checkbox"] + label:hover span.check {border-color:#8BC34A;} /* checkbox при наведении мышкой */
input[type="checkbox"]:checked + label span.check {border:3px solid #8BC34A;background: #8BC34A;} /* Оформление активного checkbox`а */
input[type="checkbox"]:checked + label span.check:before {content:"\002714";margin-left:5px;} /* Добавляем "галочку" checkbox`у */

А теперь время Html кода

<input id="checkbox" type="checkbox"></input>
<label for="checkbox"><span class="check"></span></label>

Активность checkbox`а изменяется с помощью label, который указывает на необходимый элемент с помощью атрибута "for". Для стилей очень важно, чтобы input находился перед label, иначе они не добавятся к label`у. На этом я хочу закончить данную статью. Если у вас есть вопросы или пожелания, то вы можете написать их в комментариях. Спасибо за внимание