How to Style a Checkbox Using CSS

This tutorial will introduce a method to style a check box in CSS.

Use CSS to Style the Checkboxes

A checkbox is an HTML element used to take input from the user and is used in almost all websites. Since the default checkbox provided by the browser looks the same on every other site, why not style them? Although it is a bit complicated to style them using pseudo-elements like :before, :after, :hover, and :checked, it is possible to style a checkbox using CSS.

To apply styling to the checkboxes, we will be using only HTML and CSS, with no additional libraries. This method works in modern browsers well. There can be many approaches when it comes to styling checkboxes. We can follow these simple principles to achieve our goal. We can hide the default checkbox control, which is styled by the browser and cannot be overridden in any meaningful way using CSS. With the control hidden, we will still need to detect and toggle its checked state. We can reflect the checked state of the checkbox by styling a new element.

The above principles can be applied using different methods, and there is no single right or wrong approach. In this tutorial, we will first wrap the checkbox in a div element. It means that even if the checkbox control is hidden, we can still toggle its checked state by clicking anywhere within the div. Then, we can hide the checkbox and add a new element after the checkbox, which we can style accordingly. The element must appear after the checkbox to be selected and styled dependent on the :checked state. Pseudo-class in CSS is used to style a particular element defining a specific state to the element. Here we are using some pseudo-elements. The :before selector inserts something before the content of each selected element(s). The :checked selector matches every checked <input> element.

In HTML, the checkbox is within the <label> tag. The <span> element’s main function is to reference the checkbox later from CSS.

In CSS, the display property specifies the display behavior (the type of rendering box) of an element. In our case, it is set to none, which completely removes the <input> element within the <label> tag, i.e., our default checkbox. We used height, width, and border properties to generate the custom checkbox. The CSS height and width properties set the height and width of an element. The border CSS property allows specifying the style, width, and color of an element’s border. The display property specifies display behavior. The inline value will display the element as inline. The position property specifies the types of positioning used for an element to set our new checkbox.

The :before pseudo-element is used to insert our content before the <span> element. The :checked selector matches every checked element, meaning when our checkbox is checked, new contents will be injected before the element <span> since we are using :before selector. These support the content property, which allows injecting Unicode icons. The value of the CSS property content:'\2714' represents a checkmark icon.

Example Code:

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}