How to style an HTML radio button to look like a checkbox with CSS?

Sometimes, we want to style an HTML radio button to look like a checkbox with CSS.

In this article, we’ll look at how to style an HTML radio button to look like a checkbox with CSS.

How to style an HTML radio button to look like a checkbox with CSS?

To style an HTML radio button to look like a checkbox with CSS, we use the appearance property.

For instance, we write

<label><input type="radio" name="radio" /> Checkbox 1</label>
<label><input type="radio" name="radio" /> Checkbox 2</label>

to add 2 checkboxes.

Then we write

input[type="radio"] {
  -webkit-appearance: checkbox; 
  -moz-appearance: checkbox; 
  -ms-appearance: checkbox; 
}

to add make radio buttons look like checkboxes by setting the appearance style property.

Conclusion

To style an HTML radio button to look like a checkbox with CSS, we use the appearance property.