Switch toggle checkbox

CSS styling of checkboxes using the Checkbox Hack method in the form of switches (for example, as in iOS, Google, Yandex with their switching effects).

The jQuery code is only used to keep the element in focus when the Tab key is pressed.

HTML:

<label class="checkbox-green">
	<input type="checkbox">
	<span class="checkbox-green-switch" data-label-on="On" data-label-off="Off"></span>
</label>

<label class="checkbox-green">
	<input type="checkbox" checked>
	<span class="checkbox-green-switch" data-label-on="On" data-label-off="Off"></span>
</label>

<label class="checkbox-green">
	<input type="checkbox" disabled>
	<span class="checkbox-green-switch" data-label-on="On" data-label-off="Off"></span>
</label>

<label class="checkbox-green">
	<input type="checkbox" checked disabled>
	<span class="checkbox-green-switch" data-label-on="On" data-label-off="Off"></span>
</label>
HTML

CSS:

.checkbox-green {
	display: inline-block;    
	height: 28px;    
	line-height: 28px;  
	margin-right: 10px;      
	position: relative;
	vertical-align: middle;
	font-size: 14px;
	user-select: none;	
}
.checkbox-green .checkbox-green-switch {
	display: inline-block;	
	height: 28px;
	width: 90px;
	box-sizing: border-box;
	position: relative;	
	border-radius: 2px;
	background: #848484;
	transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.checkbox-green .checkbox-green-switch:before {
	content: attr(data-label-on);
	display: inline-block;
	box-sizing: border-box;		
	width: 45px;	
	padding: 0 12px;	
	position: absolute;
	top: 0;
	left: 45px;	
	text-transform: uppercase;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 10px;
	line-height: 28px;
}
.checkbox-green .checkbox-green-switch:after {
	content: attr(data-label-off);
	display: inline-block;
	box-sizing: border-box;	
	width: 44px;	
	border-radius: 1px;	
	position: absolute;
	top: 1px;
	left: 1px;	
	z-index: 5;
	text-transform: uppercase;
	text-align: center;
	background: white;
	line-height: 26px;
	font-size: 10px;
	color: #777;	
	transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.checkbox-green input[type="checkbox"] {
	display: block;	
	width: 0;
	height: 0;	
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch {
	background-color: #70c767;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:before {
	content: attr(data-label-off);
	left: 0;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:after {
	content: attr(data-label-on);
	color: #4fb743;
	transform: translate3d(44px, 0, 0);
}

/* Hover */
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover {
	cursor: pointer;
}
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover:after {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}

/* Disabled */
.checkbox-green input[type=checkbox]:disabled + .checkbox-green-switch {
	opacity: 0.6;   
	filter: grayscale(50%);
}

/* Focus */
.checkbox-green.focused .checkbox-green-switch:after {
	box-shadow: inset 0px 0px 4px #ff5623;
}
CSS

JQuery:

$(window).keyup(function(e){
	var target = $('.checkbox-green input:focus');
	if (e.keyCode == 9 && $(target).length){
		$(target).parent().addClass('focused');
	}
});

$('.checkbox-green input').focusout(function(){
	$(this).parent().removeClass('focused');
});
JS

Result:

17.11.2020, updated 26.02.2021
154

Comments

to add a comment.

Other publications

Vertical alignment of text in a block
A way to vertically align text in blocks of fixed height. The text is wrapped in a tag with a .child class, followed by...
32
0
Heading with a horizontal line in the middle
One way to make a heading with a horizontal line in the center without an image (background-image).
53
0
The viewport meta tag
Initially, the viewport meta tag appeared in the mobile version of Safari, then it was picked up by other developers and mobile browsers, although it is not part of the W3C standard.
34
0
Smooth background change
This effect can be easily done through the CSS transition property for example buttons, menus, etc.
148
0
Connecting fonts in CSS
If you do not delve into the details, you can quickly connect the font like this ...
82
0
Aligning a block to the center of its parent
Examples of how to position an element in the center of its parent using absolute, flexbox and grid layout.
86
0