SOLVED

Horizontal Radio Buttons

Go to solution
Highlighted
Level 8

Horizontal Radio Buttons

I've seen a couple of threads about making radio buttons horizontal but I've yet to get it to work. Can someone point me in the right direction?

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 8

Re: Horizontal Radio Buttons

That didn't work, but this did:

.mktoRadioList>label, .mktoRadioList>input {display: inline-block !important; margin-right: 1em !important;margin-left: .5em !important;}

.mktoForm input[type=radio] {float: none;}

View solution in original post

10 REPLIES 10
Highlighted
Level 10 - Community Moderator

Re: Horizontal Radio Buttons

Hey Robb --

Set up a form with a few buttons and post the link (so I don't have to create another form in my lab) and I'll show you how.

Highlighted
Level 10 - Community Moderator

Re: Horizontal Radio Buttons

In the form you sent me:

LABEL[for="USCANHITRADPurchaseTiming"] ~ .mktoRadioList INPUT[type="radio"],

LABEL[for="USCANHITRADInquiryType"] ~ .mktoRadioList INPUT[type="radio"] {

    clear: none !important;

}

Highlighted
Level 8

Re: Horizontal Radio Buttons

That didn't work, but this did:

.mktoRadioList>label, .mktoRadioList>input {display: inline-block !important; margin-right: 1em !important;margin-left: .5em !important;}

.mktoForm input[type=radio] {float: none;}

View solution in original post

Highlighted
Level 10 - Community Moderator

Re: Horizontal Radio Buttons

I injected that CSS right into your page:

pastedImage_0.png

Highlighted
Anonymous
Not applicable

Re: Horizontal Radio Buttons

This worked well for setting up the radio buttons horizontally, but do you also know how to have the text appear above the button?

Highlighted
Anonymous
Not applicable

Re: Horizontal Radio Buttons

Rob, big thanks
Your answer helped me perfectly !!!!
Cheers

Highlighted
Level 8

Re: Horizontal Radio Buttons

Didn't work for me in Chrome.

Highlighted
Level 10 - Community Moderator

Re: Horizontal Radio Buttons

OK, in this particular case I had done a quick FF check.  Interesting anomaly.

Highlighted

Re: Horizontal Radio Buttons

Wrap it in a field set and put that

<style>

fieldset input[type=radio] + label  { display: inline !important; margin-right:1.5em !important; margin-left: 0 !important;

}

fieldset input[type="radio"] {float: none !important;}

</style>