ASCII text, with very long lines (3033)
title: Creating a Switch in HTML and CSS date: 2022 Feb 11 --- 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>1em;"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>1em;"input[type=checkbox].switch {1em;"-webkit-appearance: none;-moz-appearance: none;appearance: none;position: relative;width: 30px;height: 16px;}</style><input type="checkbox" class="switch">Next we want to create a ::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>1em;"input[type=checkbox].switch {1em;"-webkit-appearance: none;-moz-appearance: none;appearance: none;position: relative;width: 30px;height: 16px;}input[type=checkbox].switch::before {1em;"top: 0;left: 0;position: relative;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.Now, let's look at what it looks like#fff;border:none" src="data:text/html;base64,PHN0eWxlPmlucHV0W3R5cGU9Y2hlY2tib3hdLnN3aXRjaCB7LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lOy1tb3otYXBwZWFyYW5jZTogbm9uZTthcHBlYXJhbmNlOiBub25lO2JhY2tncm91bmQ6ICNlZmVmZWY7cG9zaXRpb246IHJlbGF0aXZlO2JvcmRlcjogMXB4IGJsYWNrIHNvbGlkO3dpZHRoOiAzMHB4O2hlaWdodDogMTZweDtib3JkZXItcmFkaXVzOiAwO31pbnB1dFt0eXBlPWNoZWNrYm94XS5zd2l0Y2g6OmJlZm9yZSB7dG9wOiAwO2xlZnQ6IDAuMjRweDtwb3NpdGlvbjogcmVsYXRpdmU7YmFja2dyb3VuZDogcmVkO2NvbnRlbnQ6ICIuIjtjb2xvcjogdHJhbnNwYXJlbnQ7d2lkdGg6IDIwcHg7aGVpZ2h0OiAxNHB4O31pbnB1dFt0eXBlPWNoZWNrYm94XS5zd2l0Y2g6Y2hlY2tlZDo6YmVmb3JlIHtsZWZ0OiAyNXB4O308L3N0eWxlPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2xhc3M9InN3aXRjaCI+"
1
---
2
title: Creating a Switch in HTML and CSS
3
date: 2022 Feb 11
4
---
5
<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>