Вы здесь

Стилизация checkbox через css

После выхода закона о том что при заполнении любых форм на сайте нужно обязательно спрашивать согласие человека на обработку данных - практически в каждом дизайне сайта появилась как минимум одна галочка.

И понятное дело, дизайнеров не устраивает стандартный вид этой галочки. Но непосредственно 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: "✓";
}
Стилизация checkbox через css
Поделиться:

Оставить комментарий