HTML document, ASCII text, with very long lines (1421)
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>Customize an HTML Checkbox - 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
Customize an HTML Checkbox
39
40
</li>
41
42
</ol>
43
<main>
44
<article>
45
<h2 id="blog-post-titled">Customize an HTML Checkbox</h2>
46
<time>2022 Feb 19</time>
47
<p><p>Checkboxes are hard to style. But when you're making a website, they may look ugly.</p><input type="checkbox" style="appearance:checkbox"><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><p>The first step toward styling it how we want it is to give it an appearence of none, and a width and height that are what you want.</p><div class="code-container"><div class="code">input[type="checkbox"] {<div style="margin-left:1em">appearance: none;<br>width: 15px;<br>height: 15px;</div>}</div><div class="preview"><input type="checkbox" style="appearance:none;width:15px;height:15px"></div></div><p>Now we can do whatever we want to it. Also, remeber to add a checked pseudo</p><div class="code-container"><div class="code">input[type="checkbox"] {<div style="margin-left:1em">appearance: none;<br>width: 15px;<br>height: 15px;<br>background: #555;<br>border: 1px #252525 solid;<br>border-radius: 2px;</div>}<br><br>input[type="checkbox"]:checked {<div style="margin-left:1em">background: #ce5aff;</div>}</div><div class="preview"><style>input[type="checkbox"].examplecheckbox3_:checked {background: #ce5aff;}input[type="checkbox"].examplecheckbox3_ {background: #555;}</style><input type="checkbox" class="examplecheckbox3_" style="appearance:none;width:15px;height:15px;border-radius:2px;border:1px #252525 solid"></div></div></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>