1

Would like to change the color of radio button:

enter image description here

However, it seems not working, still getting the default color:

enter image description here

chewing gum
  • 105
  • 1
  • 7
  • Make sure `style={{backgroundColor: 'red'}}` – Shapon Pal Mar 27 '22 at 04:10
  • Rather than inline styling here. I would suggest creating a classes because you would also need to style pseudo classes and pseudo elements for a radio button to have a custom styling. You can target input[type="radio"], and it's pseudo-element input[type="radio"]::before and it's checked stage input[type="radio"]:checked::before individually and with ease. It'll be difficult to tackle all these stylings with inline style. – Malhar Mar 27 '22 at 04:50

1 Answers1

5

You can't change the radio button color directly, You need to build your own and customize it as you want.

or you can use filter with hue-rotate() but it's not supported on Internet Explorer have a look here for more info

Edit There is a better way to do this as @Servesh Chaturvedi mentioned using accent-color: red;

#one{
  filter: hue-rotate(150deg);
}

#two{
  accent-color:red;
}
 <input type="radio" id="one" name="radio" value="first">
<label for="html">First</label><br>

 <input type="radio" id="two" name="radio" value="second">
<label for="html">Second</label><br>
Dhaifallah
  • 1,437
  • 1
  • 5
  • 19
  • 3
    I believe accent-color property also has good support now. just put `accent-color: red;` in the input – Servesh Chaturvedi Mar 27 '22 at 06:25
  • The `for` attribute needs to be set to the ID of the input it's tied to ("one" for the first label, "two" for the second one). This allows selecting the radio button by clicking it label, which you cannot do if you just set all `for` attributes to "html". – Ana Jan 05 '23 at 15:01