Control of checkbox background color

How do you do it?

[neophyte]

Hello All -

I'm working on a php validation script that - if a form element isn't valid - isn't filled in, wrong format, whatever - a class of .formError is dynamically added to the offending form element as shown here:

<input type="text" name="something" value="something" class="formError" />

My CSS is:

input.formError {
background-color: #FFD0DC;
}

This works flawlessly with text inputs, but now I've got a task that requires the same kind of visual error feedback on text boxes:

<input type="checkbox" name="something" class="formError" />

Trouble is, when I apply the same class to a checkbox input, but the background color doesn't change.

Why is that? is there a different syntax for checkboxes? Is it not possible to change the background color of a checkbox?

Any assistance greatly appreciated!

Neophyte

[Robin_reala]

Unfortunately styling of form controls is unspecified in CSS2.1, and due to the differences in display between browsers you'd be hard-pushed to expect consistency. I believe IE and Opera will let you do some background-color styling on checkboxes but you're out of luck with Gecko and Webkit. Instead of applying the background-color to the check-box itself could you maybe surround the

<input>

with another element and apply the background to that instead along with a little padding?

Of course, seeing as you're following WCAG accessibility guidelines you're going to be adding some text so that validation status isn't indicated by colour alone [w3.org], so maybe this isn't a huge problem? :)

[neophyte]

Robin_reala -

Thanks for the info - indeed I am using textural clues as well when an element doesn't validate but I'm kinda saddened that these control elements can't be styled as that would be a great way to keep a consistant look and feel across all non-valid form elements.

Appreciate you weighing in on my question - will probably settle on generating a <span class="formError">Control Text Label</span> for the "color clue" of invalid input as well as something textural as well.

Thanks again.

Neophyte