[Code snippet] Style cho checkbox dạng switch checkbox

Mã HTML

<input class="switch-checkbox" id="sample-checkbox" type="checkbox" value="true">
<label class="switch-label" for="sample-checkbox">
<i></i>
</label>

<i></i>

</label>

Mã SCSS

label.switch-label {
	width: 55px;
	height: 30px;
	display: inline-block;
	position: relative;
	border-radius: 14px;
	background-clip: padding-box;
	background: #9e9e9e;
	line-height: 30px;
	font-style: normal;
	color: #fff;
	font-weight: bold;
	transition: all 1s ease-in;
	cursor: pointer;
	i {
		position: absolute;
		top: 2px;
		right: 26px;
		width: 26px;
		height: 26px;
		display: block;
		border-radius: 50%;
		background: #fff;
		transition: all 200ms ease;
	}
}

label.switch-label:active i:before {
	box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

label.switch-label:before {
	//content: "NO";
	transition: all 200ms ease;
	float: right;
	padding-right: 20px;
}

input.switch-checkbox:checked~label.switch-label:before {
	//	content: "YES";
	margin-right: 30px;
	margin-left: 0;
}

input.switch-checkbox:checked~label.switch-label {
	background: rgb(141, 173, 51);
}

input.switch-checkbox:checked~label.switch-label i {
	right: 3px;
}

input.switch-checkbox {
	display: none;
}

label.switch-label {

width: 55px;

height: 30px;

display: inline-block;

position: relative;

border-radius: 14px;

background-clip: padding-box;

background: #9e9e9e;

line-height: 30px;

font-style: normal;

color: #fff;

font-weight: bold;

transition: all 1s ease-in;

cursor: pointer;

i {

position: absolute;

top: 2px;

right: 26px;

width: 26px;

height: 26px;

display: block;

border-radius: 50%;

background: #fff;

transition: all 200ms ease;

}

label.switch-label:active i:before {

box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3);

}

label.switch-label:before {

//content: "NO";

transition: all 200ms ease;

float: right;

padding-right: 20px;

}

input.switch-checkbox:checked~label.switch-label:before {

// content: "YES";

margin-right: 30px;

margin-left: 0;

}

input.switch-checkbox:checked~label.switch-label {

background: rgb(141, 173, 51);

}

input.switch-checkbox:checked~label.switch-label i {

right: 3px;

}

input.switch-checkbox {

display: none;

}

Kết quả như sau

See the Pen jvNQaX by leanh (@leanh) on CodePen.

Ngoài ra các bạn có thể tham khảo ví dụ của tác giả Marcus Burnette

See the Pen All-CSS Toggle Switch (Checkbox Hack) by Marcus Burnette (@mburnette) on CodePen.

Random post