Стилизация checkbox через css
Автор: Любовь → 11.07.2017
После выхода закона о том что при заполнении любых форм на сайте нужно обязательно спрашивать согласие человека на обработку данных - практически в каждом дизайне сайта появилась как минимум одна галочка.
И понятное дело, дизайнеров не устраивает стандартный вид этой галочки. Но непосредственно checkbox видоизменить нельзя. Поэтому приходится писать всякие обходные маневры.
Чтобы не писать на каждом сайте весь код заново решила сохранить готовый кусок css.
Кому актуальна стилизация checkbox пользуйтесь:
.form-checkbox{ /*прячем стандартный checkbox*/ display: none; } .form-checkbox + label{ /*изменяем курсор при наведении*/ cursor: pointer; } .form-checkbox + label:before{ /*добавляем псевдоэлемент к label*/ content: ""; display: inline-block; width: 14px; height: 14px; border: solid 1px #eaeaea; color: #ebae1c; line-height: 14px; text-align: center; font-weight: bold; margin-right: 20px; vertical-align: top; } .form-checkbox:checked + label:before{ /*добавляем галочку при клике на label*/ content: "✓"; }
Раздел:
Оставить комментарий