Чекбокс для сайта на чистом CSS

Июль 14, 2018 12:33 Admin

Достаточно часто на сайтах приходится использовать элемент checkbox для создания различных фильтров, опросов и прочего функционала. Стандартные чекбокс элементы выглядят довольно невзрачно и могут снижать конверсию сайта. Ниже представлена пара вариантов, как можно улучшить визуальное оформление данных элементов.

Вариант первый

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
		    box-sizing: border-box;
		}
		.checkbox-first__label{
			cursor: pointer;
			user-select: none;
		}
		.checkbox-first__label input:checked + .checkbox {
			border-color: #25b9d4;
		}
		.checkbox-first__label .checkbox svg {
			position: absolute;
			top: -2px;
			left: -2px;
		}
		.checkbox-first__label input:checked + .checkbox svg path {
			fill: #25b9d4;
		}
		.checkbox-first__label input:checked + .checkbox svg polyline {
		    stroke-dashoffset: 0;
		}
		.checkbox-first__label:hover .checkbox svg path {
			stroke-dashoffset: 0;
		}
		.checkbox-first__label .checkbox {
			position: relative;
			top: 2px;
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 8px;
			border-radius: 3px;
			border: 2px solid #c8ccd4;
		}
		.checkbox-first__label .checkbox svg {
			position: absolute;
			top: -2px;
			left: -2px;
		}
		.checkbox-first__label .checkbox svg path {
			fill: none;
			stroke: #25b9d4;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-dasharray: 71px;
			stroke-dashoffset: 71px;
			transition: all 0.6s ease;
		}
		.checkbox-first__label .checkbox svg polyline {
			fill: none;
			stroke: #fff;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-dasharray: 18px;
			stroke-dashoffset: 18px;
			transition: all 0.3s ease;
		}
		.checkbox-first__label > span {
			pointer-events: none;
			vertical-align: middle;
		}
		.checkbox {
			position: relative;
			top: 2px;
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 8px;
			border-radius: 3px;
			border: 2px solid #c8ccd4;
		}
		.checkbox-first__input {
			position: absolute;
			width: 0;
			height: 0;
			opacity: 0;
			z-index: -1;
		}
	</style>
</head>
<body>
<div class="checkbox-first">
	<label for="checkbox-one" class="checkbox-first__label">
		<input id="checkbox-one" type="checkbox" class="checkbox-first__input">
		<div class="checkbox">
			<svg width="20px" height="20px" viewBox="0 0 20 20">
				<path d="M3,1 L17,1 L17,1 C18.1045695,1 19,1.8954305 19,3 L19,17 L19,17 C19,18.1045695 18.1045695,19 17,19 L3,19 L3,19 C1.8954305,19 1,18.1045695 1,17 L1,3 L1,3 C1,1.8954305 1.8954305,1 3,1 Z"></path>
				<polyline points="4 11 8 15 16 6"></polyline>
			</svg>
		</div>
		<span>Вариант 1</span>
	</label>
</div>
</body>
</html>

Вариант второй

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			box-sizing: border-box;
		}
		.checkbox-second input {
			opacity: 0;
			z-index: -1;
			position: absolute;
			margin: 10px 0 0 20px;
		}
		.checkbox-second__text {
			cursor: pointer;
			position: relative;
			padding: 0 0 0 40px;
		}
		.checkbox-second__text:before {
			content: '';
			position: absolute;
			top: -1px;
			left: 0;
			width: 20px;
			height: 20px;
			border-radius: 4px;
			background: #cdd1da;
			box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
			transition: 0.3s;
		}
		.checkbox-second__text:after {
			content: '';
			top: 1px;
			left: 2px;
			opacity: 0;
			width: 16px;
			height: 16px;
			background: #fff;
			position: absolute;
			border-radius: 4px;
			box-shadow: 0 2px 5px rgba(0,0,0,.2);
			transition: 0.3s;
		}
		.checkbox-second input:checked + .checkbox-second__text:before {
			background: #9ae051;
		}
		.checkbox-second input:checked + .checkbox-second__text:after {
			opacity: 1;
		}
	</style>
</head>
<body>
	<label class="checkbox-second">
		<input type="checkbox" />
		<div class="checkbox-second__text">Вариант 2</div>
	</label>
</body>
</html>