CSS: How do you change the color of the check box in HTML?

Question

How do you change the color of the check box inside HTML?

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

Answer 1

There is no way to do this sequentially with stock inputs. Safari, for example, will never respect your settings.

You can use JavaScript to represent stylized elements that function as checkboxes. Here is one plugin that uses jQuery .

Answer 2

As others have said, this is not so easy to do in a cross-browser way.

- jQuery UI, . . , jQuery UI Checkbox.

Javascript CSS. , , jQuery.

Answer 3

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

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

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