How to Change Checkbox Color in CSS?

Checkboxes are a crucial part of web forms, allowing users to select multiple options. However, customizing their appearance—especially their color—can be tricky since checkboxes are styled by the browser by default.

In this blog, we’ll explore different ways to change the checkbox color in CSS, including customizing the background, border, and checkmark color.

1. Why Can’t You Directly Change Checkbox Colors?

Browsers render checkboxes using default system styles, which means you cannot directly change their appearance using traditional background-color or color properties. Instead, you need to:

✔ Use the appearance: none; property to remove the default styles.
✔ Style the checkbox using :checked pseudo-class to change the checkmark color.
✔ Use label and ::before or ::after pseudo-elements for a fully custom design.

2. Changing Checkbox Background Color

To change the background color of a checkbox when it is checked, use the :checked pseudo-class.

Example: Green Checkbox When Checked

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    appearance: none; /* Removes default styles */
    background-color: lightgray; /* Default background */
    border: 2px solid gray;
    border-radius: 4px;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: green; /* Changes background when checked */
    border-color: green;
}

<input type="checkbox">

✔ The checkbox now turns green when selected.

3. Customizing the Checkbox Checkmark Color

If you want to change the checkmark color, use a custom SVG icon or create a fake checkmark using CSS.

Example: White Checkmark on a Green Background

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    appearance: none;
    background-color: lightgray;
    border: 2px solid gray;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: green;
    border-color: green;
}

input[type="checkbox"]::after {
    content: '✔'; /* Unicode checkmark */
    font-size: 16px;
    color: white; /* Checkmark color */
    position: absolute;
    top: 0;
    left: 3px;
    display: none;
}

input[type="checkbox"]:checked::after {
    display: block;
}

<input type="checkbox">

✔ The checkmark will appear in white when checked.

4. Fully Custom Checkbox with Label Styling

For a modern checkbox design, use a label element and style the checkbox with ::before.

Example: Circular Checkbox with Smooth Transition

/* Hide the default checkbox */
.custom-checkbox {
    display: none;
}

/* Create a new styled checkbox */
.custom-checkbox + label {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid gray;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

/* When checked, change the background color */
.custom-checkbox:checked + label {
    background-color: blue;
    border-color: blue;
}

/* Add a checkmark */
.custom-checkbox:checked + label::after {
    content: '✔';
    font-size: 16px;
    color: white;
    position: absolute;
    top: 2px;
    left: 5px;
}

<input type="checkbox" id="checkbox1" class="custom-checkbox">
<label for="checkbox1"></label>

✔ This creates a fully custom checkbox with smooth transitions and a checkmark inside a circular button.

5. Changing Checkbox Color on Hover

You can also change the checkbox color when hovered to improve user experience.

Example: Light Blue Hover Effect

input[type="checkbox"]:hover {
    background-color: lightblue;
    border-color: blue;
}

✔ This improves the visual feedback when users hover over the checkbox.

Conclusion

To customize checkbox colors in CSS:

✔ Use appearance: none; to remove default browser styling.
✔ Use the :checked pseudo-class to change the background color.
✔ Use ::after to create a custom checkmark.
✔ Pair label with + selector for full styling control.