Ion-radio with multiple color properties

Ionic Framework Ionic Angular
1

Hi!

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

2021_04_08_124346

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)

Thanks!

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

2

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