<!--1. Связываем чекбокс с лейблом через id-->
<div class="modal-window">
<input type="checkbox" name="remember-me" id="remember-me-id">
<label for="remember-me-id">Запомни меня</label>
</div>
/* 2. Скрываем системный чекбокс */
.modal-window input[type="checkbox"] {
display: none;
}
/* 3. Готовим поле для псевдоэлемента лейбла */
.modal-window input[type="checkbox"] + label {
position: relative;
display: inline-block;
vertical-align: top;
padding-left: 32px;
}
/* 4. Лейбл при наведении */
.modal-window input[type="checkbox"] + label:hover {
text-decoration: underline;
cursor: pointer;
}
/* 5. Стилизуем лейбл под чекбокс на поз. псевдоэлементе */
.modal-window input[type="checkbox"] + label::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
border: 2px solid #000;
left: -2px;
}
/* 6. Крестик появляется, если лейбл отмечен */
.modal-window input[type="checkbox"]:checked + label::before {
background: url(../img/icon-checkbox.png) no-repeat 50%;
}
Этот метод имеет один недостаток - в старых браузерах не поддерживается псевдо-класс
:checked, поэтому стилизация там невозможна, но dispay: none; поддерживается, в результате
на сайте пропадут все чекбоксы и радиобаттоны. Имеет смысл сделать так, чтобы в старых
браузерах они отобразились в стандартном виде, для этого нужно сделать следущее:
<!--1. Скрываем чекбоксы с умом, с использованием псевдо-классов :enabled и :disabled.
Эти псевдо-классы также не поддерживаются старыми браузерами, поэтому в старых браузерах они скрываться НЕ будут-->
input[type="checkbox"]:enabled, input[type="checkbox"]:disabled {
display: none;
}
Также можно обойтись без псевдо-элементов слилизовать с помощью span (Базовый интенсив, 8 урок, 51:40)