How to style radio buttons?

Ask us anything
1

The default styling doesn’t meet my ux standards or match my branding. I want to change the style details. I’m fine using custom css but they disappear half the time I add them and don’t work the other times. What am I doing wrong? How do I figure out what classes to call out in the custom class?

Any help is appreciated!

2

What did you try? I’m talking both for the method (eg. style tag in page custom code, style tag in html element, custom css in the side panel) and the actual css.
Have you got already an idea of what you want to change and what css it requires?

3

If it’s enough to change the color the fastest and most easy way, with a good browser support, is just adding accent-color property in the custom css section of the radio input:

image
image400×738 23 KB

image

2 Likes
4

Interesting. Mine are default styled really small. But I guess that is the chrome browser?
Screenshot 2023-01-05 at 8.44.53 AM

I tried things that in light of your advise weren’t on track. Thanks for your helpful advice again.

5

Is there a way to target just the size of the radio button itself? When I add height and width like below it targets the whole line, not the radio button only.
height: 25px;
width: 25px;

6

There is, but you need to add custom style tags because the custom css panel targets the container of the radio inputs.

.my-radio-style input[type="radio"] {
  width: 3em;
  height: 3rem;
  accent-color: green;
}

result:
image

You can add the css

  • with a style tag globally in “settings > custom code” (it will be applied only in the published app)
  • with a style tag on a page by page basis using the “custom code” section in the page settings (it will be applied only in the published app)
  • with a style tag in a HTML element in the page (it will be applied both in preview and the published app. If you bind user generated values you need to be careful)
2 Likes
7

Amazing!

1 Like
8

Sadly on publish it still targets the container. I added: .my-radio-style input[type=“radio”] {
width: 3em;
height: 3rem;
accent-color: green;
}

to the custom code body section of the page. And added the HTML attribute as a class.

9

Are you sure you wrapped the css in a style tag?

Can you share screenshots of the custom code added and the side panel with the class? Just to double check the setup.