How to style a checkbox using CSS

Question

I am trying to style a checkbox using the following lines of code:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

 

But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?

Answer 1

In modern browsers which include Internet Explorer 9 and later, it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.

It is worth noting that the fundamental issue has not changed. You still can't apply styles such as borders directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked selector, you can make your replacement correctly reflect the checked status of the box.