Steve0Greatness

Customize an HTML Checkbox

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 appearence of none, and a width and height that are what you want.

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

Now we can do whatever we want to it. Also, remeber to add a checked pseudo

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

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