Styling Radio Buttons Like Buttons


#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

And Candy:


#3

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