Styling a list of checkboxes with a label

Question

I want to have a list of check boxes down the page, which has a label, as shown in the following layout:

My options  [x] Checkbox 1
            [ ] Checkbox 2
            [ ] Checkbox 3
            [ ] Checkbox 4

I'm using the method outlined here What is the best way to style a list of checkboxes in the answer by @Magnar. This works fine, but when I wrap the checkbox text as labels, the checkboxes list horizontally across the page in IE (Chrome and Firefox still render it fine).

My HTML:

<div id="options">
  <label>My options</label>
  <ul>
    <li><label><input type="checkbox">Checkbox 1</label></li>
    <li><label><input type="checkbox">Checkbox 2</label></li>
    <li><label><input type="checkbox">Checkbox 3</label></li>
    <li><label><input type="checkbox">Checkbox 4</label></li>
  </ul>
</div>

My CSS:

#options label {
  float: left;
}

#options ul {
  margin: 0;
  list-style: none;
  float: left;
}

If someone could help me get it to work nicely in IE too I'd really appreciate it. I'd also love to know why it works everywhere but IE :).

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

This will solve the issue in IE.

#options label {
  float: left;
  clear: left;
}

clear makes the element drop below any floated elements that precede it in the document.
A good diagramatic example is available in https://stackoverflow.com/a/1012141/1671639.

Check this JSFiddle in IE.

edited May 23 '17 at 12:28

Community

1
1

answered Jun 26 '13 at 05:33

Praveen

55,303
33
133
164

Neat, simple answer. Awesome. Thanks! – Chris Anderson Jun 26 '13 at 05:57
@ChrisAnderson I'm glad I was able to help. – Praveen Jun 26 '13 at 06:49

score 1 · Answer 2 · answered Jun 26 '13 at 05:43

html

<div id="options">
  <label>My options</label>
  <ul>
    <li>
           <input type="checkbox">
           <label>Checkbox 1</label>
           <div style="clear:both"></div>
        </li>
    <li>
        <input type="checkbox">
        <label>Checkbox 2</label>
        <div style="clear:both"></div>
    </li>
    <li>
        <input type="checkbox">
        <label>Checkbox 3</label>
        <div style="clear:both"></div>
    </li>
    <li>
        <input type="checkbox">
        <label>Checkbox 4</label>
        <div style="clear:both"></div>
    </li>
  </ul>
</div>

css

#options label {
  float: left;
}

#options ul {
  margin: 0;
  list-style: none;
  float: left;
}
#options ul input{
    float:left;
}

Working Demo

Thanks for your answer Abdul. Ultimately very similar in concept to that provided by user1671639, but their answer required just one line of css rather than additional divs in the HTML. Gave you an upvote for your effort. — Chris Anderson, Jun 26 '13 at 05:58

score 0 · Answer 3 · answered Jun 26 '13 at 05:32

0

You can always use http://csscheckbox.com/ to create styled check boxes.

They say that their styled checkboxes are working in IE.

I hope this will help you!!!

answered Jun 26 '13 at 05:32

NETCreator Hosting - WebDesign

6,886
3
23
43

Thanks ITChristian, but not quite what I was looking for. – Chris Anderson Jun 26 '13 at 05:59

Styling a list of checkboxes with a label

3 Answers3