CSS: How do you change the color of the "check" within an HTML checkbox?

Question

How do you change the color of the "check" within an HTML checkbox?

By default, on WinXP Firefox/Chrome/IE - the check is green. I would like to change the check within an INPUT type="checkbox" to orange

Answer 1

Form widgets are black magic. You should ask over at http://doctype.com/ (Stack Overflow, but for designers)

Answer 2

<style>input[type=checkbox] { background-color: #F00; color: #0F0; } </style>
<input type="checkbox" CHECKED>

This is not a cross-browser solution (hey, IE!). Here's a more portable one:

<style> input.checkbox { background-color: #F00; color: #0F0; } </style>
<input type="checkbox" class="checkbox" CHECKED>

Answer 3

There's no way to do this consistently with stock inputs. Safari, for one, will never respect your tweaks.

You can use JavaScript to present styled elements that function as checkboxes. Here's one plugin that uses jQuery.

Answer 4

As others have said, this isn't particularly easy to do in a cross-browser way.

But another possibility is jQuery UI which is highly customizable. You can even design a theme on their site. And along with all that you can use the jQuery UI Checkbox.

You could potentially roll your own lighter-weight version of all this with a combination of Javascript and CSS. But I imagine you'd run into a lot of compatibility issues that have already been figured out by the jQuery guys.