HTML document, ASCII text, with very long lines (338)
title: Creating a Switch in HTML and CSS date: 2022 Feb 11 updated: 2023 Feb 1 --- A switch is something that is basically just a nicer checkbox. Here, I'll be showing you how to make one.
The first step is to create checkbox with any classname; I'll be using 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 abit less than the height of the main switch, a display of inline-block, a top and left of 0, a content of anything, color of transparent, 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: "";
color: transparent;
width: 14px;
height: 14px;
}
</style>
<input type="checkbox" class="switch" />
Finally add a pseudo called :checked which checks if a checkbox, or a radio, was checked; you'll want to change the before pseudo if the the checkbox is checked. You need to set the left to a bit less than the width of the checkbox; you can adjust it until it looks right to you.
<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: "";
color: transparent;
width: 14px;
height: 14px;
}
input[type=checkbox].switch:checked::before {
left: unset !important;
right: 1px;
}
</style>
<input type="checkbox" class="switch" />
Now, let's look at what it looks like:
1
---
2
title: Creating a Switch in HTML and CSS
3
date: 2022 Feb 11
4
updated: 2023 Feb 1
5
---
6
A switch is something that is basically just a nicer checkbox. Here, I'll be showing you how to make one.
7
The first step is to create checkbox with any classname; I'll be using `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
19
<style>
20
input[type=checkbox].switch {
21
-webkit-appearance: none;
22
-moz-appearance: none;
23
appearance: none;
24
position: relative;
25
}
26
</style>
27
<input type="checkbox" class="switch" />
28
```
29
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 abit less than the height of the main switch, a display of inline-block, a top and left of 0, a content of anything, color of transparent, and a background color that's different from the one in the main switch.
31
```html
33
<style>
34
input[type=checkbox].switch {
35
-webkit-appearance: none;
36
-moz-appearance: none;
37
appearance: none;
38
position: relative;
39
background: #000;
40
width: 30px;
41
height: 16px;
42
}
43
input[type=checkbox].switch::before {
44
top: 1px;
45
left: 1px;
46
position: absolute;
47
display: block;
48
background: red;
49
content: "";
50
color: transparent;
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, or a radio, was checked; you'll want to change the before pseudo if the the checkbox is checked. You need to set the left to a bit less than the width of the checkbox; you can adjust it until it looks right to you.
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
color: transparent;
79
width: 14px;
80
height: 14px;
81
}
82
input[type=checkbox].switch:checked::before {
83
left: unset !important;
84
right: 1px;
85
}
86
</style>
87
<input type="checkbox" class="switch" />
88
```
89
Now, let's look at what it looks like:
91
<iframe style="background: #fff; border: none" src="/blog-files/switch-final.html"></iframe>
93
[See Code](/blog-files/switch-final.txt)