HTML document, ASCII text, with very long lines (2828)
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
5
6
<meta charset="UTF-8" />
8
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
<title>Creating a Switch in HTML and CSS - S0G</title>
10
<link rel="stylesheet" href="/src/global.css" />
11
12
<link rel="stylesheet" href="/src/pygments-friendly.css" />
13
</head>
15
<body>
17
<header>
18
<h2><a href="/">Steve0Greatness</a></h2>
19
<nav>
20
<a href="/blog">Blog</a>
21
<a href="/link-tree.html">Link Tree</a>
22
</nav>
23
</header>
24
25
<ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb">
26
<li>
27
<a href="/">Index</a>
28
</li>
29
30
<li >
31
<a href="/blog">
32
Blog Index
33
</a>
34
</li>
35
36
<li aria-current="location">
37
38
Creating a Switch in HTML and CSS
39
40
</li>
41
42
</ol>
43
<main>
44
<article>
45
<h2 id="blog-post-titled">Creating a Switch in HTML and CSS</h2>
46
<time>2022 Feb 11</time>
47
<p><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" srcdoc='<style>input[type=checkbox].switch {-webkit-appearance: none;-moz-appearance: none;appearance: none;background: #efefef;position: relative;border: 1px black solid;width: 30px;height: 16px;border-radius: 0;}input[type=checkbox].switch::before {top: 0;left: 0.24px;position: relative;background: red;content: ".";color: transparent;width: 20px;height: 14px;}input[type=checkbox].switch:checked::before {left: 25px;}</style><input type="checkbox" class="switch">'></iframe></p>
48
</article>
50
</main>
51
<footer role="group">
52
<div class="footer-link-list-holder">
53
<span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
54
<ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
55
<li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
56
<li><a href="https://youtube.com/@s0g">YouTube</a></li>
57
</ol>
58
</div>
59
</footer>
60
</body>
61
</html>