Posted by Nik Coughlin on 02/16/06 01:32

Stefan Mueller wrote:
> With 'background-color' I can set the color of an input box. But how
> can I set the color of the inner area of a checkbox?
>
> Stefan

There is a very dirty way to do it... I don't know if I should tell you
though, I might get told off, because it's something that you really
shouldn't do for a whole number of useability related reasons that I won't
go into here, though I'm sure the regulars will be quick to point them out
:)

Here's how it works.

You have your normal checkbox, unstyled. You use JavaScript to hide it (so
that it is still on the page but invisible) and use JavaScript to add your
replacement checkbox, which is just a boring old <img>. You then use the
onclick event of the image to switch between two custom images, one for
checked and one for unchecked. At the same time you set the hidden checkbox
to be checked or unchecked. When the form is submitted it gets the value
from your hidden checkbox. If the user doesn't have Javascript enabled then
they just get the normal unstyled checkbox as a fallback.

[Back to original message]