Avatar of sherbug1015
sherbug1015
Flag for United States of America 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.
CSSjQueryJavaScript

Avatar of undefined
Last Comment
hielo

8/22/2022 - Mon
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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
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

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.