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
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