Customized HTML Controls: Creating a Custom Checkbox

In this article, we’ll explore how to customize standard HTML controls—starting with the checkbox. This is the first entry in our “Customized HTML Controls” series, where we’ll show how to restyle and enhance common elements using only CSS and a little jQuery.

Today, we’ll create a custom checkbox that uses background images to simulate check and uncheck states.

🔲 The Concept

Standard checkboxes work great but often look outdated or don’t fit the design aesthetic of modern websites. By using images and CSS, we can craft our own stylish checkbox component.

For this example, we use a single image that includes both the checked and unchecked states side-by-side. With clever use of background-position, we can toggle between them seamlessly.

💡 You can also use separate images for each state, but combining them into one sprite is more efficient and easier to manage.

🎨 CSS Styles

We define two main classes:

.checkBox → represents the checked state.
.checkBoxClear → represents the unchecked state.


.checkBox {
    background-position: -10px 0px;
}

.checkBoxClear {
    background-position: -32px 0px;
}

.checkBox, .checkBoxClear {
    background-image: url('CheckBox.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 21px;
    height: 21px;
    padding: 0;
    margin: 0;
    cursor: pointer; /* changed from 'hand' to modern 'pointer' */
}

.checkBox {

background-position: -10px 0px;

}

.checkBoxClear {

background-position: -32px 0px;

}

.checkBox, .checkBoxClear {

background-image: url('CheckBox.png');

background-repeat: no-repeat;

display: inline-block;

width: 21px;

height: 21px;

padding: 0;

margin: 0;

cursor: pointer; /* changed from 'hand' to modern 'pointer' */

}

⚙️ jQuery Logic

We’ll use a simple jQuery script to toggle between the checked and unchecked classes on click:


<script>
$(document).ready(function() {
    $(".checkBox, .checkBoxClear").click(function() {
        $(this).toggleClass("checkBox checkBoxClear");
    });
});
</script>

$(document).ready(function() {

$(".checkBox, .checkBoxClear").click(function() {

$(this).toggleClass("checkBox checkBoxClear");

});

</script>

✅ The toggle functionality switches classes based on the current state, giving us full control over the visuals.

📦 HTML Structure

Here’s how to implement our custom checkbox in HTML:


<div class="checkBoxClear"></div>

That’s it! You can place this element anywhere you need a checkbox, and it will respond visually to user clicks thanks to our jQuery script.

🧱 Custom Checkbox with CSS & jQuery


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Checkbox with jQuery</title>
    <style>
        .checkBox {
            background-position: -10px 0px;
        }

        .checkBoxClear {
            background-position: -32px 0px;
        }

        .checkBox, .checkBoxClear {
            background-image: url('custom-check.png'); /* Image with both checked and unchecked side-by-side */
            background-repeat: no-repeat;
            display: inline-block;
            width: 21px;
            height: 21px;
            padding: 0;
            margin: 0;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".checkBox, .checkBoxClear").click(function () {
                $(this).toggleClass("checkBox checkBoxClear");
            });
        });
    </script>
</head>
<body>

    <h2>Custom Checkbox using jQuery</h2>
    <p>Click the box to toggle:</p>

    <div class="checkBoxClear"></div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Custom Checkbox with jQuery</title>

<style>

.checkBox {

background-position: -10px 0px;

}

.checkBoxClear {

background-position: -32px 0px;

}

.checkBox, .checkBoxClear {

background-image: url('custom-check.png'); /* Image with both checked and unchecked side-by-side */

background-repeat: no-repeat;

display: inline-block;

width: 21px;

height: 21px;

padding: 0;

margin: 0;

cursor: pointer;

}

</style>

$(document).ready(function () {

$(".checkBox, .checkBoxClear").click(function () {

$(this).toggleClass("checkBox checkBoxClear");

});

</script>

</head>

<body>

<h2>Custom Checkbox using jQuery</h2>

<p>Click the box to toggle:</p>

</body>

</html>

🧠 What’s Next?

So far, we’ve used jQuery to handle the interaction. But what if you want to create a similar custom checkbox using only CSS—with no JavaScript at all?

In the next section, we’ll show you how to do just that using the :checked pseudo-class and a hidden native checkbox element to preserve accessibility and functionality.

👉 Continue reading: Pure CSS Custom Checkbox