Для начала разметим чекбокс:
<label>
<input type="checkbox" checked /> Чекбокс
</label>
К сожалению, сам чекбокс стилизовать невозможно, поэтому мы спрячем настоящий чекбокс, добавим вспомогательный span и стилизуем его. Для этого воспользуемся псевдоклассом :checked, указывающим на состояние чекбокса, и селектором +, позволяющим выбрать соседний элемент:
/* html */
<label>
<input class="checkbox" type="checkbox" />
<span class="fake-checkbox"></span> Чекбокс
</label>/* css */
label {
display: block;
cursor: pointer;
}
.checkbox {
display: none;
}
.fake-checkbox {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #3c7e5e;
/* Выровняем по тексту */
vertical-align: middle;
margin-top: -2px;
margin-right: 4px;
}
/* ".checkbox:checked" срабатывает
когда checkbox отмечен, а
"+ .fake-checkbox" выбирает следующий
элемент с классом fake-checkbox */
.checkbox:checked + .fake-checkbox {
background: #3c7e5e;
}
Улучшим чекбокс, заменив закрашивание на настоящую галочку. Для этого воспользуемся псевдоэлементом ::before, который позволяет вставить дополнительный элемент перед указанным:
/* css */
/* ... */
/* Вместо самого элемента, выберем
псевдоэлемент с помощью "::before" */
.checkbox:checked + .fake-checkbox::before {
content: "✓";
font-size: 35px;
color: #3c7e5e;
/* Выровняем галочку */
display: block;
margin-top: -10px;
}
Если галка в вашем шрифте не подходит, можно подключить для неё другой шрифт:
/* css */
.checkbox:checked + .fake-checkbox::before {
/* ... */
font-family: Bureausans;
}
Если галка нестандартная, можно подставить картинку:
/* css */
/* ... */
.fake-checkbox::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url("circle.png") no-repeat center / contain;
}
.checkbox:checked + .fake-checkbox::before {
background-image: url("filled-circle.png");
}
Напоследок, чтобы картинка не мигала при первом клике, вместо изменения ссылки на картинку будем менять видимый элемент:
/* css */
/* ... */
.fake-checkbox {
position: relative;
}
/* Добавим второй элемент и
разместим их друг над другом */
.fake-checkbox::before,
.fake-checkbox::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url("circle.png") no-repeat center / contain;
}
/* Второму элементу поменяем картику
и спрячем его прозрачностью */
.fake-checkbox::after {
background-image: url("filled-circle.png");
opacity: 0;
}
/* Для отмеченного чекбокса поменяем
прозрачность элементов на противоположные */
.checkbox:checked + .fake-checkbox::before {
opacity: 0;
}
.checkbox:checked + .fake-checkbox::after {
opacity: 1;
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.