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.
sherbug1015Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

FYR:
https://css-tricks.com/almanac/selectors/c/checked/
0
sherbug1015Author Commented:
This only sets the label.  That is not what I want.  I need to set the inside of the radio button.
0
hieloCommented:
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.
0
sherbug1015Author Commented:
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.
0
hieloCommented:
OK, I did some further research, and the key is to use the css :before pseudo-element.  You could add a checkmark to the content property using the utf-8 character code:
input[type=checkbox]:checked + label:before{
  box-shadow: inset 0 -1px 3px #e4e4e4, inset 0 0 1px #222, inset 0 0 0 3px gold;
  content:'\2713';
}

Open in new window


Here's another variation  of the above link which uses solid background colors instead of limiting colors to the perimeter.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.