Streaming live at 10am (PST)

Radio button styling

Hi Webflow Team,

I am trying to create webflow radio group styled as toggle buttons for mobile optimisation. I am not sure how to achieve this using webflow. Any help will appreciated. So far i have tried creating a style for the Radio button, a style for the text and a style for the checkbox (display none to hide it). This then leaves me searching for a “selected state” and a way that the group only has one selected.

this is an example of what i am talking about: Example

Many thanks


You won’t find that in Webflow yet. For a very long time styling radio and checkboxes have been a hassle. CSS3 made this a little better.

You’ll find good resource on the three first links here

I’m trying to style my radio buttons and I’ve tried pasting some of the CSS in the links you posted to my custom code but I can’t get it to work. I’m a complete noob when it comes to code though… Any pointers appreciated.

So far the only thing that’s working is:

input[type=‘radio’] {
-webkit-appearance: none;

which basically hides the default radio buttons and displays any styling that was done to them within Webflow (but was invisible inside of webflow) but they stop acting as radio buttons. I’ve also noticed that the styling done within Webflow is invisible on a desktop browser but visible on an iphone