HTML document, ASCII text, with very long lines (313)
title: Creating a Switch in HTML and CSS date: 2022 Feb 11 updated: 2023 Feb 2 --- A switch is something that is basically just a nicer looking checkbox. Here, I'll be showing you how to make one.
The first step is to create checkbox with any class; I'll be using switch, because it's a switch.
<style>
input[type=checkbox].switch {}
</style>
<input type="checkbox" class="switch" />
Next step is to add an appearance of none to the CSS--make sure to add -moz- and -webkit-. After that, you're going to want to set it so that the checkbox a rectangle--make sure it's in px. We also want to set the position to relative
<style>
input[type=checkbox].switch {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
}
</style>
<input type="checkbox" class="switch" />
Next we want to create ::before pseudo. In there we want to make it have a position of relative, a width and height that are -1px less than the height of the main switch, a display of block, top and left set to 1px, a content of "", and a background color that's different from the one in the main switch.
<style>
input[type=checkbox].switch {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
background: #000;
width: 30px;
height: 16px;
}
input[type=checkbox].switch::before {
top: 1px;
left: 1px;
position: absolute;
display: block;
background: red;
content: "";
width: 14px;
height: 14px;
}
</style>
<input type="checkbox" class="switch" />
Finally add a pseudo called :checked which checks if a checkbox was checked, you'll want to change the before pseudo if the the checkbox is checked. You'll need to put it on the opposite side of where it started, for me, that's on the right-side.
<style>
input[type=checkbox].switch {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
background: #000;
width: 30px;
height: 16px;
}
input[type=checkbox].switch::before {
top: 1px;
left: 1px;
position: absolute;
display: block;
background: red;
content: "";
width: 14px;
height: 14px;
}
input[type=checkbox].switch:checked::before {
left: 15px; /* .switch width - .switch::before width - 1px */
}
</style>
<input type="checkbox" class="switch" />
I'm using the left property instead of the right property as it makes it easier to transition between the 2 positions. Here is the CSS with the transition added in, plus a background change(also dark mode):
<style>
:root {
background: #000;
color: #fff;
}
input[type=checkbox].switch {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
background: #fff;
width: 30px;
height: 16px;
}
input[type=checkbox].switch::before {
top: 1px;
left: 1px;
position: absolute;
display: block;
background-color: #ff5c1c;
content: "";
width: 14px;
height: 14px;
transition: background-color .5s, left .5s;
}
input[type=checkbox].switch:checked::before {
left: 15px; /* .switch width - .switch::before width - 1px */
background-color: #3f9b00;
}
</style>
<input type="checkbox" class="switch" />
All of this results in a final product that looks like:
1
---
2
title: Creating a Switch in HTML and CSS
3
date: 2022 Feb 11
4
updated: 2023 Feb 2
5
---
6
A switch is something that is basically just a nicer looking checkbox. Here, I'll be showing you how to make one.
7
The first step is to create checkbox with any class; I'll be using `switch`, because it's a switch.
9
```html
11
<style>
12
input[type=checkbox].switch {}
13
</style>
14
<input type="checkbox" class="switch" />
15
```
16
Next step is to add an appearance of none to the CSS--make sure to add `-moz-` and `-webkit-`. After that, you're going to want to set it so that the checkbox a rectangle--make sure it's in `px`. We also want to set the position to relative
18
```html
20
<style>
21
input[type=checkbox].switch {
22
-webkit-appearance: none;
23
-moz-appearance: none;
24
appearance: none;
25
position: relative;
26
}
27
</style>
28
<input type="checkbox" class="switch" />
29
```
30
Next we want to create `::before` pseudo. In there we want to make it have a position of relative, a width and height that are `-1px` less than the height of the main switch, a display of block, top and left set to `1px`, a content of `""`, and a background color that's different from the one in the main switch.
32
```html
34
<style>
35
input[type=checkbox].switch {
36
-webkit-appearance: none;
37
-moz-appearance: none;
38
appearance: none;
39
position: relative;
40
background: #000;
41
width: 30px;
42
height: 16px;
43
}
44
input[type=checkbox].switch::before {
45
top: 1px;
46
left: 1px;
47
position: absolute;
48
display: block;
49
background: red;
50
content: "";
51
width: 14px;
52
height: 14px;
53
}
54
</style>
55
<input type="checkbox" class="switch" />
56
```
57
Finally add a pseudo called `:checked` which checks if a checkbox was checked, you'll want to change the before pseudo if the the checkbox is checked. You'll need to put it on the opposite side of where it started, for me, that's on the right-side.
59
```html
61
<style>
62
input[type=checkbox].switch {
63
-webkit-appearance: none;
64
-moz-appearance: none;
65
appearance: none;
66
position: relative;
67
background: #000;
68
width: 30px;
69
height: 16px;
70
}
71
input[type=checkbox].switch::before {
72
top: 1px;
73
left: 1px;
74
position: absolute;
75
display: block;
76
background: red;
77
content: "";
78
width: 14px;
79
height: 14px;
80
}
81
input[type=checkbox].switch:checked::before {
82
left: 15px; /* .switch width - .switch::before width - 1px */
83
}
84
</style>
85
<input type="checkbox" class="switch" />
86
```
87
I'm using the `left` property instead of the `right` property as it makes it easier to transition between the 2 positions. Here is the CSS with the transition added in, plus a background change(also dark mode):
89
```html
91
<style>
92
:root {
93
background: #000;
94
color: #fff;
95
}
96
input[type=checkbox].switch {
97
-webkit-appearance: none;
98
-moz-appearance: none;
99
appearance: none;
100
position: relative;
101
background: #fff;
102
width: 30px;
103
height: 16px;
104
}
105
input[type=checkbox].switch::before {
106
top: 1px;
107
left: 1px;
108
position: absolute;
109
display: block;
110
background-color: #ff5c1c;
111
content: "";
112
width: 14px;
113
height: 14px;
114
transition: background-color .5s, left .5s;
115
}
116
input[type=checkbox].switch:checked::before {
117
left: 15px; /* .switch width - .switch::before width - 1px */
118
background-color: #3f9b00;
119
}
120
</style>
121
<input type="checkbox" class="switch" />
122
```
123
All of this results in a final product that looks like:
125
<iframe style="background: #fff; border: none" src="/blog-files/switch-final.html"></iframe>
127
[See Code](/blog-files/switch-final.txt)