HTML document, 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.
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" View Source
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" View Source
1
title: Customize an HTML Checkbox
2
date: 2022 Feb 19
3
updated: 2024 Feb 2
4
**TL;DR**: `appearance: none;`.
6
Checkboxes are hard to style. But when you're making a website, they may look ugly.
8
<input type="checkbox" style="all: revert;" />
10
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
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
```css
16
input[type="checkbox"] {
17
appearance: none;
18
width: 15px;
19
height: 15px;
20
background-color: grey;
21
}
22
```
23
<br />
24
<iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #000; border: none"></iframe>
26
<a href="/blog-files/checkbox-custom-styles-ex1.txt">View Source</a>
27
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.
29
```css
31
input[type="checkbox"] {
32
appearance: none;
33
width: 15px;
34
height: 15px;
35
background: #000;
36
border: 1px #fff solid;
37
border-radius: 2px;
38
}
39
input[type="checkbox"]:checked {
41
background: #ce5aff;
42
}
43
```
44
<br />
45
<iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #000; border: none"></iframe>
47
<a href="/blog-files/checkbox-custom-styles-ex2.html">View Source</a>
48