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.
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.
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?
input[type=checkbox]:check
FYR:
https://css-tricks.com/almanac/selectors/c/checked/