How to align checkboxes and their labels consistently cross-browsers?

Posted by Jessica Taylor | Updated on

Want to align checkboxes and their labels consistently cross-browsers After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:

1. Inputs must be on their own line.

2. Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.

3. If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).

Before I get into any explanation, I’ll just give you the code:


If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers