How to Change the Checkbox Background Color in CSS?

Last Updated : 28 Jun, 2024

Change the checkbox background color in CSS by hiding the default checkbox and using custom styles with the ::before and ::after pseudo-elements. This involves creating a custom checkbox that looks and works just like a regular checkbox but with your own design.

Below are the approaches to change the Checkbox Background Color in CSS:

Table of Content

Using Pseudo-elements
Using CSS appearance Property

Using Pseudo-elements

In this approach, we are creating a webpage with a custom-styled checkbox and an image. The CSS hides the checkbox and styles its label to show a custom box. When the checkbox is checked, the box turns red with a white square inside. An image and label with "Check me" text are displayed on a green background.

Example: This example shows the change of background color of a checkbox using pseudo element.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Custom Checkbox</title>
    <style>
        img {
            display: flex;
            width: 200px;
            margin-bottom: 20px;
            height: 200px;
        }

        body {
            background: green;
        }

        input[type="checkbox"] {
            display: none;
        }

        input[type="checkbox"]+label {
            position: relative;
            padding-left: 25px;
            cursor: pointer;
            user-select: none;
        }

        input[type="checkbox"]+label::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 2px solid #555;
            background: white;
        }

        input[type="checkbox"]:checked+label::before {
            background: red;
        }

        input[type="checkbox"]:checked+label::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 5px;
            width: 8px;
            height: 8px;
            background: white;
        }
    </style>
</head>

<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210511160813/g4g.jpg">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">Check me</label>
</body>

</html>

Output:

Screencastfrom2024-06-1109-23-09-ezgifcom-video-to-gif-converter — output

Using CSS appearance Property

In this approach, we are creating a webpage with a custom-styled checkbox and an image. The CSS hides the default checkbox appearance and styles it to be a 20x20px white box with a gray border. When checked, the box's background turns blue. The page displays an image and uses a green background for the body. CSS appearance property is used to change the background of the checkbox.

Example: This example shows the change of background of a checkbox using the appearance property.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Custom Checkbox Appearance</title>
    <style>
        img {
            display: flex;
            width: 200px;
            margin-bottom: 20px;
            height: 200px;
        }

        body {
            background: green;
        }

        input[type="checkbox"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid #555;
            background: white;
        }

        input[type="checkbox"]:checked {
            background: blue;
        }
    </style>
</head>

<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210511160813/g4g.jpg">
    <input type="checkbox" />
</body>

</html>

Output:

Screencastfrom2024-06-1109-27-18-ezgifcom-video-to-gif-converter — Output

How to Change Background Color in HTML without CSS ?

isandeep2183

Improve

Article Tags :

How to Change the Checkbox Background Color in CSS?

Using Pseudo-elements

Using CSS appearance Property

Similar Reads

Thank You!

What kind of Experience do you want to share?