Styling Radio Buttons Like Buttons

I’m trying to use CSS to style radio buttons to look more like normal buttons. But I’m struggling pretty hard to get them to take on a different colour when clicked.

I tried this answer with no luck.

From inspecting the rendered page, it seems react is generating the labels and inputs like
<label class="button button-primary"><input type="radio" class="" value="on"><!-- react-text: 31 -->AM Peak<!-- /react-text --></label>

Which it seems like makes it impossible to apply the CSS to the parent label based on the input being clicked, per this answer to that same question

Other styling frameworks for radio buttons like this one don’t work, I suspect due to the reason above. The below is what iOS and Candy styles look like.


instead of iOS

And Candy:

Where you able to solve this issue? I’m struggling with the same exact point as you did

We’re revisiting this after a bit and it seems like the Dash Bootstrap Components package might offer the ability to do more exciting customizations of radio buttons

1 Like