Best methods to style checkboxes and radio buttons

[James_Zolinski]

Hello everyone,

I'm trying to determine what the best way to style checkboxes and radio buttons with embed forms. I know there are tons of cutting-edge CSS methods, but I'm looking for something that is widely supported on desktop and mobile. Our audiences is truckers who primarily use their phones (out in the field), followed by desktop (luckily for the most part, they are using fairly modern browsers).

What I'm doing is using the javascript form embed code from Marketo, then using Sanford Whiteman​'s javascript (codepen here) to strip inline styles and destyle mkto classes, so that our CSS will take effect. (I'm also aware of a similar method that just removes all mkto class names and inline-styles. But Sanford's latest codepen seems to be "cooler" and cleaner).

I just can't decide which route to go with these checkboxes and radio buttons. A couple things I considered was to try and handle it all via CSS or using javascript to say, grab the label value, inject that after the input, and hide the label all together.

Here is an example page: http://go.prepass.com/KitchenSinkExample.html and if it helps at all, here is a code pen of the same thing.

In this example, the form on the left is my embedded Marketo form. On the right, is the form I received from our third-party design team. I am trying to match the first form's checkboxes/radio buttons to match the second form (where the input is on the left with the label on the right, and the spacing is nice haha).

Any recommendations on methods that you have found worked well? I went from a team of many to a team of just me and am struggling to make decisions on which methods I should be using.

[SanfordWhiteman · Accepted solution]

It'd be easy to switch the label text and flip it after the input as just text, but I'd think you'd want an actual <label>, no? Their code is misusing the <label> element (sending it to a nonexistent ID) and that also reduces usability because the text can't be clicked.

[James_Zolinski]

I finally got time to get back to this.

I ended up using CSS and realized how much using CSS frameworks has bitten me in the behind.

With the right combination of float and clear, I got it! Never really had to play too much with float/clear because of grid frameworks. Now I know more!

.mktoRadioList .mktoField {

  width: 15px;

  float: left;

  clear: left;

}

.mktoRadioList label {

  float: left;

  clear: right;

}

.mktoCheckboxList .mktoField[id^="mktoCheckbox"] {

  width: 15px;

  float: left;

  clear: left;

}

.mktoCheckboxList label[for^="mktoCheckbox"] {

  float: left;

  clear: right;

}

.mktoFormRow {

  clear: both;

}

.mktoButtonRow {

  clear: both;

}

Code pen is updated with just this CSS. Pages are updated with further styling. After finishing touches I need to go break it, but so far so good! Thank you for your help Sanford!

EDIT: appended [id^="mktoCheckbox"] to .mktoCheckboxList .mktoField and appended [for^="mktoCheckbox"] to .mktoCheckboxList label. This makes it specific to checkboxes with more than one option. As single option checkboxes will need to display inline, rather than with a label and checkboxes under the label.

[James_Zolinski]

Sanford Whiteman​, I noticed that when using visibility rules, when a new field becomes visible, your destyling script doesn't catch the new inline-styles that are pushed with the now visible new field.

I simply updated your script from "whenReady()" to "onFormRender()". This seemed to solve that problem.

Just thought I'd mention it, and also in case you thought of a reason why this solution isn't so great.

Thank you so much for writing that whole thing and making it public!!! It was a tremendous help

[SanfordWhiteman]

Yep, current version uses whenRendered. I'll update the other Pen.