A mirror of my website's source code.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 creatingaswitch.md

View raw Download
text/html • 2.79 kiB
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:

#fff;border:none" src="/blog-files/switch-final.html"

See Code

                
                    
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
8
The first step is to create checkbox with any classname; I'll be using `switch`.
9
10
```html
11
<style>
12
input[type=checkbox].switch {}
13
</style>
14
<input type="checkbox" class="switch" />
15
```
16
17
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
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 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
32
```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
58
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
60
```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
90
Now, let's look at what it looks like:
91
92
<iframe style="background:#fff;border:none" src="/blog-files/switch-final.html"></iframe>
93
94
[See Code](/blog-files/switch-final.txt)