HTML document, ASCII text
1
<!DOCTYPE html>
2
<html>
3
<head>
5
<style>
6
:root {
7
background: #000;
8
color: #fff;
9
}
10
input[type=checkbox].switch {
11
-webkit-appearance: none;
12
-moz-appearance: none;
13
appearance: none;
14
position: relative;
15
background: #fff;
16
width: 30px;
17
height: 16px;
18
}
19
input[type=checkbox].switch::before {
20
top: 1px;
21
left: 1px;
22
position: absolute;
23
display: block;
24
background-color: #ff5c1c;
25
content: "";
26
width: 14px;
27
height: 14px;
28
transition: background-color .5s, left .5s;
29
}
30
input[type=checkbox].switch:checked::before {
31
left: 15px; /* .switch width - .switch::before width - 1px */
32
background-color: #3f9b00;
33
}
34
</style>
35
</head>
36
<body>
38
<input type="checkbox" class="switch" />
39
</body>
40
</html>