"Checkbox as Toggle Switch (Pure CSS)"
Bootstrap 4.0.0 Snippet by chiraggoyal777

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Toggle Switch</h2>
<h4 class="ques">Hi coder, did you like it?</h4>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
<span class="absolute-no">NO</span>
</label>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
background: #000;
font-family: sans-serif;
text-align: center;
}
.ques {
color: darkslateblue;
}
.switch {
position: relative;
display: inline-block;
width: 260px;
height: 100px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f2f2;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
z-index: 2;
content: "";
height: 96px;
width: 96px;
left: 2px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: