Changing radio button color based on which one clicked

sherbug1015
sherbug1015 used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
hielo
Expert of the Year 2008
Top Expert 2008

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

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

Author

Commented:
This only sets the label.  That is not what I want.  I need to set the inside of the radio button.
hielo
Expert of the Year 2008
Top Expert 2008

Commented:
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

Author

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.
Expert of the Year 2008
Top Expert 2008
Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial