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: