Way to Align Checkboxes and Their Labels Consistently (cross-browsers)

So, the problem is how to align checkbox and its label and looking the same in all browsers. You align them in one browser and then check with another they can be completely messed up.

Let’s have the standard code first:


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

 

And is one solution that I find working perfect for my need:


label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

 

This code assumes that you’re using a reset like Eric Meyer’s that doesn’t override form input margins and padding (hence putting margin and padding resets in the input CSS).

Leave a Reply


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


You've arrived on the "Advanced CSS/HTML Explained" weblog. Here you will find how can you tackle the more difficult topics of Cascading Style Sheets: Floating theory, Forms, Tables, Navigation elements, CSS Positioning. Also you will find lots of Resources, Tutorials, Articles, and Tips, Tricks Tools, and Techniques on CSS.

Subscribe to our RSS Feed Follow us on Twitter

Recent Posts

Categories

Twitter Updates

Bookmark and Share