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, how to style an HTML radio button to look like a checkbox with CSS, we will look at.

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

We use the appearance property, to style an HTML radio button to look loke a checkbox with CSS.
For instance, we also write

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

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 look like a checkbox with CSS, we use the appearance property, to style an HTML radio button.

Leave a Reply