Turn radio button into a box button

  • Profile Image
    Asked on April 21, 2012 at 12:04 AM

    Initially I wanted to use an image to place aside a radio button (and hide the radio button) but I think that's not possible on JotForm.

    Right now, I'm thinking of making the radio buttons into text-only buttons. But I'm still a few steps away and need some CSS help.

    I've hid the radio button circle already but by doing that, the user has no way of knowing which is clicked. So I was wondering if it's possible to:

    1. create a box outline around the options

    2. the box outline changes color or some sort of highlight when the cursor hovers over it. Also box changes color once it is selected

    3. Is it possible to increase the spacing between the options (on same line) without extending the text? Right now if I add more spacing the text at the bottom just moves up.


    If all above is a bit difficult, is there any attractive way to make image buttons (not submit button)?

  • Profile Image
    Answered on April 21, 2012 at 12:10 AM

    Ok, I think I am also able to just make two radio buttons placed side to side instead of one radio button with 2 options.

    FYI - these radio buttons help determine which form will appear at the bottom. It's unnecessary for me to know which is selected in the notification email. I just need clear indications for the user if the radio circle is not there.

  • Profile Image
    Answered on April 21, 2012 at 09:14 PM

    Hi again tomchen

    I recall creating a form some time ago that replaced radio buttons with images whose borders became highlighted when selected but I discovered that it didn't work in all browsers. I'll have to check on that.

    As to creating attractive image buttons, try CoolText.com. I've used their service a few times and I've always been satisfied with the results.

    You had asked in your first post above if it's possible to increase the spacing between options that are on the same line without extending the text. The answer is yes, although I can't currently remember the necessary CSS to inject. But I can find that out for you.