Customizing Checkboxes with CSS and HTML: A Complete Guide

Introduction

Checkboxes are small yet powerful elements that allow users to make selections from multiple options. Although default checkboxes are functional, they often lack aesthetic appeal. In modern web design, visual elements play a key role in enhancing user experience, and customizing checkboxes is one way to make your forms and interfaces stand out.

In this blog, we’ll explore how to use CSS and HTML to create a customized checkbox, focusing on adjusting the tick mark color, background color, border styling, and overall size of the checkbox. Whether you’re building a website or enhancing a form, this tutorial will help you style checkboxes that align with your design vision.

The Basics of Checkbox Customization

Browsers provide default styling for checkboxes, but you can override these styles using CSS. In this example, we'll show how to:

Change the size of the checkbox.
Modify the background and border color.
Style the tick mark inside the checkbox.

By applying custom styles, you can match the checkbox design to your site's theme or brand color palette.

HTML and CSS Code Example

Below is the code for a customized checkbox where the size, color, and border have been styled. You can simply copy and paste this code into your own project to implement the customization.

<html>

<body>
    <style>
        input[type="checkbox"].styled-checkbox:checked {
            -webkit-appearance: none;
            appearance: none;
             /* Size of the checkbox */
            width: 13px;
           /* Size of the checkbox */
            height: 13px;
            /* Background color */
            background-color:  rgba(18, 105, 218, 0.368);
            /* Rounded corners */
            border-radius: .25em;
            /* Border color */
            outline: 1px solid rgb(18, 105, 218);

            position: relative;
        }

        input[type="checkbox"].styled-checkbox:checked::after {
            content: '';
            /* Center vertically */
            position: absolute;
            top:40%;
            /* Center horizontally */
            left: 30%;
            /* Width of the tick */
            width: 2.5px;
            /* Height of the tick */
            height: 7px;
            /* Tick color */
            border: solid rgb(18, 105, 218);
            /* Thinner tick (reduced thickness) */
            border-width: 0 2.1px 2.1px 0;
            /* Center and rotate the tick */
            transform: translate(4%, -50%) rotate(35deg);
        }

    </style>

    <input type="checkbox" class="styled-checkbox" checked>Label
</body>

</html>

Code Breakdown

Checkbox Size: The width and height properties set the dimensions of the checkbox. In this case, it's set to 13px for a compact design.
Background Color: The background-color property uses rgba(18, 105, 218, 0.368) to give the checkbox a semi-transparent blue background when checked.
Border Styling: The border of the checkbox is set to a light bluish color with a transparency level, providing a sleek, modern look.
Tick Mark Customization: We use the ::after pseudo-element to create the tick mark inside the checkbox. By setting the tick’s size, color, and rotation, we can control its appearance.
Rounded Corners: The border-radius property adds a slight roundness to the checkbox's corners, making it softer and visually pleasing.

Why Customize Your Checkboxes?

Checkboxes are essential in form design, and customizing them can provide a number of advantages:

Brand Consistency: You can use colors that match your brand to create a cohesive design across your website.
Enhanced User Experience: A well-designed checkbox with clear ticks and borders improves accessibility and user interaction.
Visual Appeal: Customized checkboxes elevate the overall look and feel of your site, making it more modern and engaging.

Conclusion

With just a few lines of CSS, you can transform the default checkbox into a stylish element that enhances your website’s aesthetics. By customizing the color, size, and tick style, you can provide a more enjoyable and visually cohesive user experience.

Customising Checkboxes: How to Style Checkboxes with CSS and HTML