steve0greatness,
created on Friday, 2 February 2024, 07:41:33 (1706859693),
received on Monday, 6 May 2024, 02:55:37 (1714964137)
Author identity: Steve0Greatness <steve0greatnessiscool@gmail.com>
7bbb6c2c014cf3feaffe7c84f5b92fcd0e1f754d
blog-posts/creatingaswitch.md
@@ -1,5 +1,94 @@
---
title: Creating a Switch in HTML and CSS
date: 2022 Feb 11
updated: 2023 Feb 1
---
<p>A switch is something that is basically just a nicer checkbox. Here, I'll be showing you how to make one.</p>The first step is to create checkbox with any classname; I'll be using <span class="code">switch</span>.<div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {}</div></style><br /><input type="checkbox" class="switch"></div><p>Next step is to add an appearance of none to the CSS--make sure to add <span class="code">-moz-</span> and <span class="code">-webkit-</span>. After that, you're going to want to set it so that the checkbox a rectangle--make sure it's in <span class="code">px</span>. We also want to set the position to relative</p><div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {<div style="margin-left:1em;">-webkit-appearance: none;<br />-moz-appearance: none;<br />appearance: none;<br />position: relative;<br />width: 30px;<br />height: 16px;</div>}</div></style><br /><input type="checkbox" class="switch"></div><p>Next we want to create a <span class="code">::before</span> 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.</p><div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {<div style="margin-left:1em;">-webkit-appearance: none;<br />-moz-appearance: none;<br />appearance: none;<br />position: relative;<br />width: 30px;<br />height: 16px;</div>}<br />input[type=checkbox].switch::before {<div style="margin-left:1em;">top: 0;<br />left: 0;<br />position: relative;<br />background: red;<br />content: ".";<br />color: transparent;<br />width: 14px;<br />height: 14px;</div>}</div></style><br /><input type="checkbox" class="switch"></div><p>Finally add a pseudo called <span class="code">:checked</span> 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.</p>Now, let's look at what it looks like<br /><iframe style="background:#fff;border:none" src="data:text/html;base64,PHN0eWxlPmlucHV0W3R5cGU9Y2hlY2tib3hdLnN3aXRjaCB7LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lOy1tb3otYXBwZWFyYW5jZTogbm9uZTthcHBlYXJhbmNlOiBub25lO2JhY2tncm91bmQ6ICNlZmVmZWY7cG9zaXRpb246IHJlbGF0aXZlO2JvcmRlcjogMXB4IGJsYWNrIHNvbGlkO3dpZHRoOiAzMHB4O2hlaWdodDogMTZweDtib3JkZXItcmFkaXVzOiAwO31pbnB1dFt0eXBlPWNoZWNrYm94XS5zd2l0Y2g6OmJlZm9yZSB7dG9wOiAwO2xlZnQ6IDAuMjRweDtwb3NpdGlvbjogcmVsYXRpdmU7YmFja2dyb3VuZDogcmVkO2NvbnRlbnQ6ICIuIjtjb2xvcjogdHJhbnNwYXJlbnQ7d2lkdGg6IDIwcHg7aGVpZ2h0OiAxNHB4O31pbnB1dFt0eXBlPWNoZWNrYm94XS5zd2l0Y2g6Y2hlY2tlZDo6YmVmb3JlIHtsZWZ0OiAyNXB4O308L3N0eWxlPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2xhc3M9InN3aXRjaCI+"></iframe>
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`.
```html
<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
```html
<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.
```html
<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.
```html
<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:
<iframe style="background:#fff;border:none" src="/blog-files/switch-final.html"></iframe>
[See Code](/blog-files/switch-final.txt)
static/blog-files/switch-final.html
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<body>
<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" />
</body>
</html>
static/blog-files/switch-final.txt
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<body>
<style>
input[type=checkbox].switch {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 30px;
height: 16px;
}
input[type=checkbox].switch::before {
top: 1px;
left: 1px;
position: relative;
display: block;
background: red;
content: "";
color: transparent;
width: 14px;
height: 14px;
}
input[type=checkbox].switch:checked::before {
left: unset;
right: 1px;
}
</style>
<input type="checkbox" class="switch" />
</body>
</html>