Setting checkbox background ...

izi13 used Ask the Experts™
I'd like to change the background of a checkbox in my form. I've tried to set color and background elements in my CSS, but it doesn't work.
How can it be done ?

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013

It cannot be done.  If you want that kindof an effect you will have to use a graphic, but then it will not function like a check box.

COBOLdinosaur is right.

But you can use javascript to make it behave like a checkbox.


I've made a script that uses images and hidden forminputs once. If you have a sec, I'll put it online for you :-D (this makes things easier than placing the code here, because of the images).

It works fine (the images I made look really great, I think ;-).
The JS needs some work to make the script work properly on reloads and when people press back to get back to the form. But this will be fairly easy :-) (it was an unfinished (little) project)

I'll have it online before you know it!

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Here it is:

As I said, it needs some debugging.
Just look in the source :-)

Hope this helps,


you can change the color around the checkbox using the following code but there is no good way to change the actual background color inside the checkbox.

<input type="checkbox" name="color" style="background-color: #99cccc" value="red">


Actually, Netscape colors the "background color inside the checkbox", it's IE that doesn't :-)

But the form elements look !!_AWFUL_!! in Netscape (6). They should do something about it (I don't know if the form-elements in NN 7 still look bad, does anyone know?)

as derek47d said, works in all browsers


Thanx for the script ...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial