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.md

View raw Download
text/plain • 1.22 kiB
ASCII text

title: Customize an HTML Checkbox date: 2022 Feb 19 updated: 2024 Feb 2

TL;DR: appearance: none;.

Checkboxes are hard to style. But when you're making a website, they may look ugly.

revert;" /

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.

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.

input[type="checkbox"] {
   appearance: none;
   width: 15px;
   height: 15px;
   background-color: grey;
}

#000; border: none"

Now we can do whatever we want to it. You're also able to add a :checked sudo to change certain elements(like the background-color) depending on if the checkbox is checked or not.

input[type="checkbox"] {
   appearance: none;
   width: 15px;
   height: 15px;
   background: #000;
   border: 1px #fff solid;
   border-radius: 2px;
}

input[type="checkbox"]:checked {
   background: #ce5aff;
}

#000; border: none"

                
                    
1
title: Customize an HTML Checkbox
2
date: 2022 Feb 19
3
updated: 2024 Feb 2
4
5
TL;DR: `appearance: none;`.
6
7
Checkboxes are hard to style. But when you're making a website, they may look ugly.
8
9
<input type="checkbox" style="all: revert;" />
10
11
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.
12
13
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.
14
15
```css
16
input[type="checkbox"] {
17
appearance: none;
18
width: 15px;
19
height: 15px;
20
background-color: grey;
21
}
22
```
23
24
<iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #000; border: none"></iframe>
25
26
Now we can do whatever we want to it. You're also able to add a `:checked` sudo to change certain elements(like the `background-color`) depending on if the checkbox is checked or not.
27
28
```css
29
input[type="checkbox"] {
30
appearance: none;
31
width: 15px;
32
height: 15px;
33
background: #000;
34
border: 1px #fff solid;
35
border-radius: 2px;
36
}
37
38
input[type="checkbox"]:checked {
39
background: #ce5aff;
40
}
41
```
42
43
<iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #000; border: none"></iframe>
44