A mirror of my website's source code.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 checkbox-custom-styles.html

View raw Download
text/html • 2.86 kiB
HTML document, ASCII text, with very long lines (1421)
        
            
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
6
7
<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
14
</head>
15
16
<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
49
</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
62
</html>