How to align checkboxes and their labels consistently cross-browsers

This is one of the minor CSS problems that plague 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!

40
40

Leave a Comment