Style Radio Button

Good Day

Just a quick one, how do I style radio button using CSS?

I’ve have set the background colour but I am trying style the inner cycle (check box), could you kindly direct me in the right direction to do so.

Kind Regards

Hello @Donovan_Hardwick

I recommend that you read this article.
Also under Theme - Editor - Open SDK styles there are variables that can be used to change the styles.


Thank you @Inna_Shkolnaya

Luckily I already know most of that, but the radio button in particular is giving me problems. Below is the CSS coding for the radio button.

Screenshot 2022-06-03 at 10.33.43

Here is the radio button…

Screenshot 2022-06-03 at 10.35.10

All I want to do is change the inside circle of the checkbox to white, for both when it is checked or not.

Kind Regards

If you told about the background inside the circle, not the inner dot - unfortunately, it’s impossible.
But it you about dot - @radioCheckedInnerCircleColor works well for me.

Regards, Dima.

Thank you @Dima_Vak

Thank you it works…

Screenshot 2022-06-03 at 10.51.15

Is there anything we can do about the outside circle?

Kind Regards

Yes, and as we write before you could check all variables at SDK Styles.

Hello @Donovan_Hardwick!

Try to do it this way:

.new-radio-button-okay .MuiIconButton-label {
  width: 20px;
  height: 20px;
  background-color: deepskyblue;
  border-radius: 50%;



1 Like

@Dima_Vak Never mind I got it…

Screenshot 2022-06-03 at 10.55.25

Last question, what the code be for the outside circle which is un-checked?

Kind Regards

Thank you @Alexander_Pavelko :raised_hands:

1 Like

@Alexander_Pavelko @Inna_Shkolnaya @Dima_Vak

Thank you for your assistance, I found all the coding for radio button.

1 Like