The appearance of radio buttons and checkboxes differs quite a lot between different 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:
