What is the best way to style checkboxes?

CM1
1

Hi,

I’d like to get checkboxes in a form under control so they format something like:

a.) selecting to place the label on the left from the properties settings doesn’t seem to have an effect and

b.) I’d like to order them in columns

Thanks!

2

Hey Dan,

I think I figured this out. Let me know if you have any questions with the following method:

And here is the CSS I wrote to make these radio button align:

#field-i-am-interested-in-these-services-input-container \> div:nth-child(odd) {float:left;width:150px;}
3

^ I’ve love to see more of this. I am still trying to learn CSS as I go.

4

Kemal,

Thanks for taking a look at this. I’ll need a little more info regarding where to put the ID info.

When I bring up the properties for, say a drop down menu, I see this:

But when I bring up the properties for the check boxes, I only see this:

5

I didn’t need to assign any ID’s or Classes to any element in the example above. I went with the CM1 generated ID. When I created the form, the name that I gave to the label of the radio buttons (which was “I am interested in these services”) got turned into an ID by CM1. (#field-i-am-interested-in-these-services-input-container).

So all you have to do is create the form, give your radio buttons a label, preview the page and look at the ID of the element that surrounds your radio button inputs. Firebug should help you here.

Here are some screenshots:

6

One caveat - the nth-child selector doesn’t work in IE 7 or 8. If you need to support those browsers, there seem to be a few workarounds - this thread might help: http://css-tricks.com/forums/discussi…