SOLVED

Horizontal Radio Buttons

Go to solution
Robb_Barrett
Marketo Employee

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?

Robb Barrett
1 ACCEPTED SOLUTION

Accepted Solutions
Robb_Barrett
Marketo Employee

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;}

Robb Barrett

View solution in original post

10 REPLIES 10
SanfordWhiteman
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.

SanfordWhiteman
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;

}

Robb_Barrett
Marketo Employee

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;}

Robb Barrett
SanfordWhiteman
Level 10 - Community Moderator

Re: Horizontal Radio Buttons

I injected that CSS right into your page:

pastedImage_0.png

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?

Anonymous
Not applicable

Re: Horizontal Radio Buttons

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

Robb_Barrett
Marketo Employee

Re: Horizontal Radio Buttons

Didn't work for me in Chrome.

Robb Barrett
SanfordWhiteman
Level 10 - Community Moderator

Re: Horizontal Radio Buttons

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

Diego_Lineros2
Level 7

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>