✅ Building a Pure CSS Custom Checkbox

No JavaScript. Just Clean HTML & CSS.

Creating visually appealing and interactive form elements used to require JavaScript. But with modern CSS, you can now fully customize checkboxes using nothing but HTML and CSS.

In this article, we’ll show you how to build a pure CSS custom checkbox from scratch — no external libraries or JavaScript required.


<label class="custom-checkbox">
    <input type="checkbox">
    <span class="checkmark"></span>
    Pure CSS Custom Checkbox
</label>

Pure CSS Custom Checkbox

</label>

🧠 Why use a <label>? Clicking the text will also toggle the checkbox — improving both UX and accessibility.

🎨 Styling with CSS

Here’s where the magic happens.

We style the container, hide the default checkbox input, and design a custom box with a checkmark that appears when the checkbox is selected.


.custom-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #ccc;
    border-radius: 4px;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox {

display: inline-block;

position: relative;

padding-left: 25px;

cursor: pointer;

font-size: 16px;

user-select: none;

}

.custom-checkbox input {

position: absolute;

opacity: 0;

cursor: pointer;

}

.checkmark {

position: absolute;

top: 0;

left: 0;

height: 20px;

width: 20px;

background-color: #ccc;

border-radius: 4px;

}

.custom-checkbox input:checked ~ .checkmark {

background-color: #2196F3;

}

.checkmark:after {

content: "";

position: absolute;

display: none;

}

.custom-checkbox input:checked ~ .checkmark:after {

display: block;

}

.custom-checkbox .checkmark:after {

left: 7px;

top: 3px;

width: 5px;

height: 10px;

border: solid white;

border-width: 0 2px 2px 0;

transform: rotate(45deg);

}

🖼️ How It Works

The real checkbox input is hidden using opacity: 0.
The .checkmark span acts as the visual box.
When the checkbox is checked, the .checkmark background changes color.
A checkmark (✓) is drawn using CSS borders and is only shown when the box is checked.

💡 Why Use Pure CSS?

⚡ Lightweight — No JavaScript needed.
🧩 Customizable — Easily change size, colors, or animations.
🧠 Accessible — Works seamlessly with screen readers when using proper labels.
🎨 Design-Friendly — You’re in full control of styling.

🧪 Demo Time

Here’s a live snippet of the complete code in action:


<label class="custom-checkbox">
    <input type="checkbox">
    <span class="checkmark"></span>
    Pure CSS Custom Checkbox
</label>

Pure CSS Custom Checkbox

</label>

💡 Try styling the checkmark with different shapes, colors, or even animations for a more dynamic UI.

Here’s the complete and final HTML + CSS code for the Pure CSS Custom Checkbox demo based on your structure, ready to run in any browser:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure CSS Custom Checkbox</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background-color: #f9f9f9;
        }

        .custom-checkbox {
            display: inline-block;
            position: relative;
            padding-left: 30px;
            margin-bottom: 20px;
            cursor: pointer;
            font-size: 18px;
            user-select: none;
            color: #333;
        }

        .custom-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #ccc;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .custom-checkbox input:checked ~ .checkmark {
            background-color: #2196F3;
        }

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .custom-checkbox input:checked ~ .checkmark:after {
            display: block;
        }

        .custom-checkbox .checkmark:after {
            left: 7px;
            top: 3px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>

    <h2>Pure CSS Custom Checkbox</h2>

    <label class="custom-checkbox">
        <input type="checkbox">
        <span class="checkmark"></span>
        I agree to the terms and conditions
    </label>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Pure CSS Custom Checkbox</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 40px;

background-color: #f9f9f9;

}

.custom-checkbox {

display: inline-block;

position: relative;

padding-left: 30px;

margin-bottom: 20px;

cursor: pointer;

font-size: 18px;

user-select: none;

color: #333;

}

.custom-checkbox input {

position: absolute;

opacity: 0;

cursor: pointer;

}

.checkmark {

position: absolute;

top: 0;

left: 0;

height: 20px;

width: 20px;

background-color: #ccc;

border-radius: 4px;

transition: background-color 0.3s ease;

}

.custom-checkbox input:checked ~ .checkmark {

background-color: #2196F3;

}

.checkmark:after {

content: "";

position: absolute;

display: none;

}

.custom-checkbox input:checked ~ .checkmark:after {

display: block;

}

.custom-checkbox .checkmark:after {

left: 7px;

top: 3px;

width: 5px;

height: 10px;

border: solid white;

border-width: 0 2px 2px 0;

transform: rotate(45deg);

}

</style>

</head>

<body>

<h2>Pure CSS Custom Checkbox</h2>

I agree to the terms and conditions

</label>

</body>

</html>

✅ This version is clean, accessible, and production-ready. You can copy and paste this directly into your project or embed it into your documentation or blog post.