# How to style radio buttons?

**URL:** <https://community.weweb.io/t/how-to-style-radio-buttons/1663>\
**Category:** Ask us anything\
**Created:** [January 4, 2023, 9:18pm UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663 "2023-01-04T21:18:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 4, 2023, 9:18pm UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/1 "2023-01-04T21:18:32Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [January 5, 2023, 8:38am UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/2 "2023-01-05T08:38:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [January 5, 2023, 9:21am UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/3 "2023-01-05T09:21:43Z")

</div>

If it’s enough to change the color the fastest and most easy way, with a [good browser support](https://caniuse.com/?search=accent-color), is just adding [accent-color](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) property in the custom css section of the radio input:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c102c33726c91a4d0a3783e80369c2c0d764911f.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/bc751d31abaaaf67c7f71304c6a2c5603b879edc.png)

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 5, 2023, 2:47pm UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/4 "2023-01-05T14:47:31Z")

</div>

Interesting. Mine are default styled really small. But I guess that is the chrome browser?  
 ![Screenshot 2023-01-05 at 8.44.53 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/681ecdc080433095a41b124881fd833c8b3918bc.png)

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

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 5, 2023, 2:56pm UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/5 "2023-01-05T14:56:45Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [January 5, 2023, 3:22pm UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/6 "2023-01-05T15:22:03Z")

</div>

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

- add a class to the weweb radio element  

- add this css to the page:

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

```

result:  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4459b1a874afd2f279e98f5719aa881e15d016a6.png)

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)

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 5, 2023, 5:54pm UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/7 "2023-01-05T17:54:50Z")

</div>

Amazing!

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 6, 2023, 2:22pm UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/8 "2023-01-06T14:22:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [January 6, 2023, 2:38pm UTC](https://community.weweb.io/t/how-to-style-radio-buttons/1663/9 "2023-01-06T14:38:49Z")

</div>

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.