How to align checkboxes and their labels consistently cross-browsers

Question

This is one of the minor CSS problems that plagues me constantly. How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), they're completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.

Here's the standard code that I work with:

<form>

    <div>

        <label><input type="checkbox" /> Label text</label>

    </div>

</form>

I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!

Answer 1

The checkboxes mentioned below are properly vertically centered in Safari, FF, IE, and Chrome, even if the text size is very small or large. All of them will float next to each other on the same line, but the nowrap means that the whole label text always stays next to the checkbox.

.checkboxes label {

  display: inline-block;

  padding-right: 10px;

  white-space: nowrap;

}

.checkboxes input {

  vertical-align: middle;

}

.checkboxes label span {

  vertical-align: middle;

}

<form>

  <div class="checkboxes">

    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>

    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>

    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>

  </div>

</form>

Note: Sometimes vertical-align needs two inline (span, label, input, etc...) elements next to each other to work properly. 

Now, if you are having a very long label text that needed to wrap without wrapping under the checkbox, then you should use padding and negative text-indent on the label elements like this:

.checkboxes label {

  display: block;

  padding-right: 10px;

  padding-left: 22px;

  text-indent: -22px;

}

.checkboxes input {

  vertical-align: middle;

}

.checkboxes label span {

  vertical-align: middle;

}

<form>

  <div class="checkboxes">

    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>

    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>

    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>

  </div>

</form>

Comments

Hi,

I've tested your solution on an actual form.
But as long as the label text is small it works great.
When the label text is long it start cascading the check boxes.

Am I missing something?