Ion-radio with multiple color properties


I want to change the colors of ion-radio. I need to specify different colors like the next image.


I found only two related CSS Custom Properties (--color and --color-checked) at ion-radio: Ionic Framework API Docs
But they don’t do what I want… :frowning:

There’s any way to change the colors individually?
I mean… the three colors (outer circle fill, outer circle border and inner circle)


P.S. I think that if it’s not possible nowadays, It could be an interesting feature to implement.

i think that inside Ionic component a radio button is a native element specific to each OS/browser. There is no way to change its color/style at all. maybe a little changes like this

:checked {

box-shadow: 0 0 0 3px r #00ffb3;


/* Radio element, when checked */

input[type=“radio”]:checked {

box-shadow: 0 0 0 3px rgb(0, 4, 255);


1 Like