HTML document, ASCII text, with very long lines (401)
1
<!DOCTYPE html>
2
<html lang="en-us" prefix="og: https://ogp.me/ns# article: http://ogp.me/ns/article# profile: https://ogp.me/ns/profile#">
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
<meta property="og:locale" content="en_US" />
12
<meta property="og:site_name" content="Steve0Greatness" />
13
<meta property="og:image" content="/OG-Image.png" />
14
15
<link rel="stylesheet" href="/src/code-blocks.css" />
16
<link rel="stylesheet" href="/src/blog.css" />
17
<link rel="alternate" href="/blog/creatingaswitch.txt" type="text/plain" title="Post source" />
18
<meta property="og:title" content="Creating a Switch in HTML and CSS" />
19
<meta property="og:type" content="article" />
20
<meta property="article:published_time" content="2022-02-11T00:00:00Z" />
21
<meta property="article:author" content"https://steve0greatness.github.io" />
22
<meta property="article:modified_time" content="2023-02-02T00:00:00Z" />
23
<meta property="profile:first_name" content="Steve0Greatness" />
24
<meta property="profile:username" content="Steve0Greatness" />
25
<meta property="profile:gender" content="male" />
26
<meta property="og:url" content="https://steve0greatness.github.io/blog/creatingaswitch.html" />
27
</head>
29
<body>
31
<header>
32
<h2><a href="/"><img src="/SteveLogo.webp" height="35" width="215" alt="Steve0Greatness" /></a></h2>
33
<nav>
34
<a href="/blog">Blog</a>
35
<a href="/list/link-tree.html">Link Tree</a>
36
</nav>
37
</header>
38
39
<nav aria-label="breadcrumbs" aria-roledescription="Site breadcrumb">
40
<ol class="breadcrumbs">
41
42
<li>
43
<a href="/">Index</a>
44
</li>
45
46
<li >
47
<a
48
49
href="/blog"
50
>Blog Index</a>
51
</li>
52
53
<li >
54
<a
55
aria-current="location"
56
href="/blog/creatingaswitch.html"
57
>Creating a Switch in HTML and CSS</a>
58
</li>
59
60
61
</ol>
62
</nav>
63
<main>
64
<h1>Creating a Switch in HTML and CSS</h1>
65
<article>
66
<header>
67
<div role="toolbar" class="toolbar">
68
<strong>Share</strong>
69
<a href="https://toot.kytta.dev/?text=Take a look at this article by @S0G@mastodon.social: https://steve0greatness.github.io/blog/creatingaswitch.html" title="Share to Mastodon">
70
<img src="/toot-kytta-dev-icon.png" width="16" height="16" aria-hidden="true" title="Share to Mastodon" />
71
</a>
72
<a href="/blog/creatingaswitch.html" title="Direct link">
73
<img src="/link-icon.png" width="16" height="16" aria-hidden="true" title="Direct link" />
74
</a>
75
<a href="/blog/creatingaswitch.txt" title="Markdown source">
76
<img src="/md-src.png" width="16" height="16" aria-hidden="true" />
77
</a>
78
</div>
79
<div class="time-stamps">
80
<time datetime="2022-02-11T00:00:00-08:00">2022 Feb 11 PST</time>
81
- <span aria-hidden="true" style="font-style:italic">Revision as of: </span> <time datetime="2023-02-02T00:00:00-08:00" aria-label="Revision">2023 Feb 2 PST</time>
82
83
</div>
84
</header>
85
<p>A switch is something that is basically just a nicer looking checkbox. Here, I'll be showing you how to make one.</p>
86
<p>The first step is to create checkbox with any class; I'll be using <code>switch</code>, because it's a switch.</p>
88
<div class="codehilite">
90
<pre><span></span><code><span class="p"><</span><span class="nt">style</span><span class="p">></span>
91
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{}</span>
92
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
93
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"switch"</span> <span class="p">/></span>
94
</code></pre>
95
</div>
96
<p>Next step is to add an appearance of none to the CSS--make sure to add <code>-moz-</code> and <code>-webkit-</code>. After that, you're going to want to set it so that the checkbox a rectangle--make sure it's in <code>px</code>. We also want to set the position to relative</p>
98
<div class="codehilite">
100
<pre><span></span><code><span class="p"><</span><span class="nt">style</span><span class="p">></span>
101
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{</span>
102
<span class="w"> </span><span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
103
<span class="w"> </span><span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
104
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
105
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
106
<span class="w"> </span><span class="p">}</span>
107
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
108
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"switch"</span> <span class="p">/></span>
109
</code></pre>
110
</div>
111
<p>Next we want to create <code>::before</code> pseudo. In there we want to make it have a position of relative, a width and height that are <code>-1px</code> less than the height of the main switch, a display of block, top and left set to <code>1px</code>, a content of <code>""</code>, and a background color that's different from the one in the main switch.</p>
113
<div class="codehilite">
115
<pre><span></span><code><span class="p"><</span><span class="nt">style</span><span class="p">></span>
116
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{</span>
117
<span class="w"> </span><span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
118
<span class="w"> </span><span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
119
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
120
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
121
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
122
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
123
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
124
<span class="w"> </span><span class="p">}</span>
125
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
126
<span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
127
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
128
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
129
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
130
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
131
<span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">""</span><span class="p">;</span>
132
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
133
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
134
<span class="w"> </span><span class="p">}</span>
135
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
136
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"switch"</span> <span class="p">/></span>
137
</code></pre>
138
</div>
139
<p>Finally add a pseudo called <code>:checked</code> which checks if a checkbox was checked, you'll want to change the before pseudo if the the checkbox is checked. You'll need to put it on the opposite side of where it started, for me, that's on the right-side.</p>
141
<div class="codehilite">
143
<pre><span></span><code><span class="p"><</span><span class="nt">style</span><span class="p">></span>
144
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{</span>
145
<span class="w"> </span><span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
146
<span class="w"> </span><span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
147
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
148
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
149
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
150
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
151
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
152
<span class="w"> </span><span class="p">}</span>
153
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
154
<span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
155
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
156
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
157
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
158
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
159
<span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">""</span><span class="p">;</span>
160
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
161
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
162
<span class="w"> </span><span class="p">}</span>
163
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">:</span><span class="nd">checked</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
164
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="c">/* .switch width - .switch::before width - 1px */</span>
165
<span class="w"> </span><span class="p">}</span>
166
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
167
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"switch"</span> <span class="p">/></span>
168
</code></pre>
169
</div>
170
<p>I'm using the <code>left</code> property instead of the <code>right</code> property as it makes it easier to transition between the 2 positions. Here is the CSS with the transition added in, plus a background change(also dark mode):</p>
172
<div class="codehilite">
174
<pre><span></span><code><span class="p"><</span><span class="nt">style</span><span class="p">></span>
175
<span class="w"> </span><span class="p">:</span><span class="nd">root</span><span class="w"> </span><span class="p">{</span>
176
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
177
<span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
178
<span class="w"> </span><span class="p">}</span>
179
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{</span>
180
<span class="w"> </span><span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
181
<span class="w"> </span><span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
182
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
183
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
184
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
185
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
186
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
187
<span class="w"> </span><span class="p">}</span>
188
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
189
<span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
190
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
191
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
192
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
193
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ff5c1c</span><span class="p">;</span>
194
<span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">""</span><span class="p">;</span>
195
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
196
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
197
<span class="w"> </span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="k">background-color</span><span class="w"> </span><span class="mf">.5</span><span class="kt">s</span><span class="p">,</span><span class="w"> </span><span class="kc">left</span><span class="w"> </span><span class="mf">.5</span><span class="kt">s</span><span class="p">;</span>
198
<span class="w"> </span><span class="p">}</span>
199
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">:</span><span class="nd">checked</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
200
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="c">/* .switch width - .switch::before width - 1px */</span>
201
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#3f9b00</span><span class="p">;</span>
202
<span class="w"> </span><span class="p">}</span>
203
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
204
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"switch"</span> <span class="p">/></span>
205
</code></pre>
206
</div>
207
<p>All of this results in a final product that looks like:</p>
209
<iframe style="background: #fff; border: none" src="/blog-files/switch-final.html"></iframe>
211
<p><a href="/blog-files/switch-final.txt">See Code</a></p>
213
</article>
215
</main>
216
<footer>
217
<div class="footer-link-list-holder" role="group">
218
<span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span>
219
<ol class="footer-link-list" aria-labelledby="footer-label-site-details">
220
<li><a href="/list/website-sources-mirrors.html">Source Code and Mirrors</a></li>
221
<li><a href="https://steve0greatness.github.io/extras">Extras</a></li>
222
</ol>
223
</div>
224
<div class="footer-link-list-holder" role="group">
225
<span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
226
<ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
227
<li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
228
<li><a href="https://youtube.com/@s0g">YouTube</a></li>
229
<li><a href="/list/link-tree.html">More...</a></li>
230
</ol>
231
</div>
232
</footer>
233
</body>
234
</html>