Ask A Question


You’re not receiving notifications from this thread.

Radio buttons as actual buttons

Charlie Gaines asked in CSS

Hey all,

I am trying to convert a form with radio buttons such that the radio buttons are just plain buttons. When selected they should have an active class and register the selected choice. I've looked around a bunch for a solution...and have tried several things myself with no luck. Has anyone tackled this problem?




I think you'll need to use Javascript to pull it off. If you use Bootstrap it comes with support for that kind of functionality.

You might also be able to do it with pure CSS but it looks like you need to use JS for IE8 support:


Yea that's how I ended up doing it - with Bootstrap buttons and JS and a hidden input. How could I improve this?

$('button.assessment-button').click (e)->
    val = $(this).attr('value')

The Bootstrap code should actually check the radio buttons for you. You don't need to use a hidden field because with radio buttons, you set the same name for the different inputs and the browser submits only the value of the checked one. Does that make sense?


Thanks Chris...I figured it out in the end using the native Bstrap functionality. But for another framework you might need to use an approach like the one I pasted in above, no?


Yes definitely would if you're using something that doesn't have it built-in.

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 82,464+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.