HTML document, ASCII text
1
<!DOCTYPE html>
2
<html>
3
<body>
5
<style>
6
input[type=checkbox].switch {
7
-webkit-appearance: none;
8
-moz-appearance: none;
9
appearance: none;
10
position: relative;
11
width: 30px;
12
height: 16px;
13
}
14
input[type=checkbox].switch::before {
15
top: 1px;
16
left: 1px;
17
position: relative;
18
display: block;
19
background: red;
20
content: "";
21
color: transparent;
22
width: 14px;
23
height: 14px;
24
}
25
input[type=checkbox].switch:checked::before {
26
left: unset;
27
right: 1px;
28
}
29
</style>
30
<input type="checkbox" class="switch" />
31
</body>
32
</html>