Support
RH
Ray Howard
 · Posted in Support

Color Coding of Radio Buttons using CSS

I have two options on a radio button component, Normal or Abnormal. If the user picks Normal I want just that word to be in Green with Abnormal in Black and then if they pick Abnormal that word is Red and Normal is Black.

I can get it to have both words in one color, (both words Green if Normal is chosen etc). How do I get it to only show the single word. I have Custom CSS that works. Fin Bot suggests using ON Change (from the Logic Menu) but there are a few problems with that. I can get it to do the same as if I was using a Custom CSS Class using On Change, but it's not what I want.

Best reply by Erin Dwyer

Hi Ray Howard ,

The following CSS should allow you to specifically target the label of a radio question based on both its value and checked state. 

label:has(input[value="normal"][checked="true"]){
    color: green;
}

label:has(input[value="abnormal"][checked="true"]){
    color: red;
}

Heres an example of the output.

View original
4 replies