HTML document, ASCII text
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>Customize an HTML Checkbox - 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/checkbox-custom-styles.txt" type="text/plain" title="Post source" />
18
<meta property="og:title" content="Customize an HTML Checkbox" />
19
<meta property="og:type" content="article" />
20
<meta property="article:published_time" content="2022-02-19T00:00:00Z" />
21
<meta property="article:author" content"https://steve0greatness.github.io" />
22
<meta property="article:modified_time" content="2024-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/checkbox-custom-styles.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/checkbox-custom-styles.html"
57
>Customize an HTML Checkbox</a>
58
</li>
59
60
61
</ol>
62
</nav>
63
<main>
64
<h1>Customize an HTML Checkbox</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/checkbox-custom-styles.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/checkbox-custom-styles.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/checkbox-custom-styles.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-19T00:00:00-08:00">2022 Feb 19 PST</time>
81
- <span aria-hidden="true" style="font-style:italic">Revision as of: </span> <time datetime="2024-02-02T00:00:00-08:00" aria-label="Revision">2024 Feb 2 PST</time>
82
83
</div>
84
</header>
85
<p><strong>TL;DR</strong>: <code>appearance: none;</code>.</p>
86
<p>Checkboxes are hard to style. But when you're making a website, they may look ugly.</p>
88
<p><input type="checkbox" style="all: revert;" /></p>
90
<p>As you can see here, this bland checkbox does not fit into my clearly great website(/s). But really, it does not fit in at all.</p>
92
<p>The first step toward styling it how we want it is to give it an appearance of none, and a width and height that are what you want.</p>
94
<div class="codehilite">
96
<pre><span></span><code><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">"checkbox"</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
97
<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>
98
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
99
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
100
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">grey</span><span class="p">;</span>
101
<span class="p">}</span>
102
</code></pre>
103
</div>
104
<p><br /></p>
106
<iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #000; border: none"></iframe>
108
<p><a href="/blog-files/checkbox-custom-styles-ex1.txt">View Source</a></p>
110
<p>Now we can do whatever we want to it. You're also able to add a <code>:checked</code> sudo to change certain elements(like the <code>background-color</code>) depending on if the checkbox is checked or not.</p>
112
<div class="codehilite">
114
<pre><span></span><code><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">"checkbox"</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
115
<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>
116
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
117
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
118
<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>
119
<span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="mh">#fff</span><span class="w"> </span><span class="kc">solid</span><span class="p">;</span>
120
<span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="kt">px</span><span class="p">;</span>
121
<span class="p">}</span>
122
<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">"checkbox"</span><span class="o">]</span><span class="p">:</span><span class="nd">checked</span><span class="w"> </span><span class="p">{</span>
124
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#ce5aff</span><span class="p">;</span>
125
<span class="p">}</span>
126
</code></pre>
127
</div>
128
<p><br /></p>
130
<iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #000; border: none"></iframe>
132
<p><a href="/blog-files/checkbox-custom-styles-ex2.html">View Source</a></p>
134
</article>
136
</main>
137
<footer>
138
<div class="footer-link-list-holder" role="group">
139
<span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span>
140
<ol class="footer-link-list" aria-labelledby="footer-label-site-details">
141
<li><a href="/list/website-sources-mirrors.html">Source Code and Mirrors</a></li>
142
<li><a href="https://steve0greatness.github.io/extras">Extras</a></li>
143
</ol>
144
</div>
145
<div class="footer-link-list-holder" role="group">
146
<span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
147
<ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
148
<li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
149
<li><a href="https://youtube.com/@s0g">YouTube</a></li>
150
<li><a href="/list/link-tree.html">More...</a></li>
151
</ol>
152
</div>
153
</footer>
154
</body>
155
</html>