Problem And Question
I am trying to style checkbox using the following:
<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />
But, it is still displaying the default checkbox. How to do it?
Best Solution And Answer
Here are some useful links:
- Easy CSS3 Checkboxes and Radio Buttons
- Collection of checkbox styles from CSSDeck
- Creating Custom Form Checkboxes with Just CSS
- Easy CSS Checkbox Generator
- Stuff You Can Do With The Checkbox Hack
- Implementing Custom Checkboxes and Radio Buttons with CSS3
- How to Style a Checkbox With CSS
- Pure CSS Radio and Checkbox Inputs
It is worth noting that the fundamental issue has not changed. You still can’t apply styles (borders, etc.) 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.
Here’s a useful article about styling checkboxes. Basically what that writer found was that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn’t an easy way.
Edited to add: here’s a nice script that does this for you; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.