Styling Radio Buttons Like Buttons

Dash Python
1

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

2

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.

image

instead of iOS

image
image.png771×195 5.32 KB

And Candy:

image
image.png774×309 15.5 KB

3

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

4

Hello!
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