How to align checkboxes and their labels consistently cross-browsers

Posted by One Crayon on Stack Overflow See other posts from Stack Overflow or by One Crayon
Published on 2008-11-20T18:02:01Z Indexed on 2010/05/10 22:14 UTC
Read the original article Hit count: 188

Filed under:
|
|

This is one of the minor CSS problems that plagues me constantly. How do folks around StackOverflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them right 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!

© Stack Overflow or respective owner

Related posts about css

Related posts about html