Radio button color [RESOLVED]

Hello,

I am trying to change the radio button background color on selection: https://snipboard.io/6tIR2M.jpg

I can’t seem to find the already existing topic in the form.

Hope you can help,
Olga

Can you share a link to the page on your site where we can see the form? Thank you.

Hi Chris,

Sorry for the delay. Here is the website staging https://lilianstage.wpengine.com/

Thank you,
Olga

Radio buttons are browser elements and are notoriously difficult to style. Here’s a discussion:

That said, I was able to apply some styling to the element on your page using hue-rotate or greyscale: firefox bebBg5Kln2.png - Droplr

div.gfield_radio input[type="radio"]:checked {
  filter: grayscale(1);
}

This worked to change to other colors: firefox tdR5QNtq0z.png - Droplr

div.gfield_radio input[type="radio"]:checked {
  filter: hue-rotate(90deg); /* from 0deg to 360deg)
}

Thank you Chris, It’s working :slight_smile:

1 Like