Link to home
Start Free TrialLog in
Avatar of nisupport
nisupport

asked on

Set checkbox and radio color

How do you sent the color of a checkbox and radio button?
I have tried: <input type="radio" name="hear" value="brochure" style="background-color:#FACD97; color:#FACD97;"> which puts the color around the button.

This shows the color when you scroll over the checkbox or radio button.
input.radio {
background-color: #FACD97;
color: #FACD97;
}
Avatar of mreuring
mreuring
Flag of Netherlands image

Would you be terribly disappointed if I'd say, you can't? At least not reliably. Maybe some browser or another will pick up some color from your CSS but then there's a few on OS X who will completely ignore you altogether.

That's not to say there isn't any way to do your own color radio-buttons or checkboxes at all. You can run a script to replace them with some smart html-elements and re-implement the behaviour of the checkboxes/radio's but that's a rather eleborate way to go and I'm not so sure I'd know where to start explaining this :)
ASKER CERTIFIED SOLUTION
Avatar of xberry
xberry
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of nisupport
nisupport

ASKER

What do I need to do in css to change the colors of the checkboxes, even though it won't work on some? I am okay with that.
The links provided by xberry on his answer (http:#19705722) basically outline all the possible properties you could set and even shows the way they would come out on different browsers. At least, at a quick glance that seems what those links are for.

To actually implement anything specifically for checkboxes you'd need to give your checkboxes a classname, for instance "checkbox" (nice and simple)
<input type="checkbox" class="checkbox" />

Then use whatever css you wold like to use to change the colors, for instance:
.checkbox {
border-color: #00F;
background-color: #88F;
color: #0F0;
}

Check in your favorite browsers what each property does, find the mix that works best for those browsers that you wish to support and you're done.

Trial and error is the only way to find out what meets your needs here.