Streamlining radio buttons and checkboxes with CSS & Font Awesome

The appearance of radio buttons and checkboxes differs greatly between browsers. Luckily, there are a number of ways to streamline the look of these input elements across browsers. One of them involves a combination of HTML, pure CSS and Font Awesome icons.

HTML structure & icons

The required HTML structure consists of a <label> element wrapping a hidden <input type="checkbox"> tag and two icons as well as an optional label text. Each of the icons represents one of the checkbox’s two possible states.

<label class="checkbox">
    <input type="checkbox" name="salami">
    <i class="far fa-lg fa-square"></i>
    <i class="far fa-lg fa-check-square"></i>
    Add salami by activating this chekbox
</label>

Wondering about why you would use the <label> tag as a wrapper and whether that really is legit HTML5? First of all, it is definitely legit, and secondly, this technique spares you having to provide a for="…" attribute on the <label>.

CSS rules

The CSS code uses the :checked pseudo-class selector to toggle one or the other of the icons.

label.checkbox input:checked ~ .fa-square {
    display: none;
}
label.checkbox input:not(:checked) ~ .fa-check-square {
    display: none;
}

That’s all there is to do! Your checkboxes will now look the same on every browser. As a bonus, you can also colorize them to make them fit the rest of your design: