Radio buttons horizontal

Anonymous
Not applicable

Radio buttons horizontal

Is it possible to display radio button lists horizontal?

I couldn't find an option to change the order. So my question, can we change the order through CSS?
And if yes, what is the code?

Thanks!

Tags (1)
6 REPLIES 6
Anonymous
Not applicable

Re: Radio buttons horizontal

Radio buttons and checkboxes are aligned horizontally by default, as are the labels.
 
One option (which I did not test in full) would be a CSS property
 
input[type="radio"] {
    display:inline-block;
}
 
label {
    display:inline-block;
}
 
Anonymous
Not applicable

Re: Radio buttons horizontal

Hi Breno,

Can't get it to work. Can you perhaps send the exact Marketo code?

I have tried:

.mktoForm .mktoRadioList > label,
{
  margin-bottom:0.6em;
  display:inline-block;
}
.mktoForm input[type=radio] {
  width:1em;
  height:1em;
  opacity:0;
  display:inline-block;
}

Thanks.
Anonymous
Not applicable

Re: Radio buttons horizontal

This is exactly what I used on one of my forms that I made horizontal.  Hope it helps!

 
.mktoRadioList input, .mktoRadioList label {
    float: left !important;
     margin-right: 2px;
    margin-left: 10px;
    margin: 2px 2px 2px 2px 2px;
  padding: 0px 0px 0px 0px 0px;
    padding-left: 0px;
  padding-right: 3px;
    text-indent: 1px;
    text-align: left;
 
}
Anonymous
Not applicable

Re: Radio buttons horizontal

If you cannot edit the the HTML of an individual landing page or a form, where does this HTML go?
Anonymous
Not applicable

Re: Radio buttons horizontal

Kristen, you can edit the custom CSS of a form theme. 

Here are step-by-step instructions: https://community.marketo.com/MarketoArticle?id=kA050000000LHXhCAO
Robb_Barrett
Level 10

Re: Radio buttons horizontal

Bumping this thread. I've tried using a couple of types of CSS I've found while searching and nothing is working.