asked on

Changing radio button color based on which one clicked

Is there anyway I can use CSS to switch the color of two radio buttons between green and red, depending on which one is checked or moused over.

One radio button with have a label = Active and the other will have a label = Away. When Active is checked then the button should be green and the Away should be red when checked.

I see examples of setting the label to another color, but not setting the color of the inside of the button.

Thanks for help.

hielo

Try:
input[type=checkbox]:checked{...}

FYR:
https://css-tricks.com/almanac/selectors/c/checked/

sherbug1015

ASKER

This only sets the label. That is not what I want. I need to set the inside of the radio button.

hielo

You were not supposed to use "label" as part of the csc rule. However, last time I tried setting the background-color on radio/checkboxes, I got different results across browsers. So be sure to test. Ultimately I ended up wrapping the radio buttons in a span and changed the span's background instead.

sherbug1015

ASKER

I could not get the css to work at all without the +label. So I tried wrapping the radio button in a span. Not seeing any changes there either. Here is my span. Do you see anything wrong with it?

sb.Append("<span class=\"active\" background-color=\"ffffcc\" /><input type=\"radio\" name=\"radstatus\" id=\"rad1\" /><label for=\"rad1\">" + s1 + "</label></span>");

Thanks.

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial