Way to Align Checkboxes and their Labels Consistently

Posted on 31st Oct, 2009 in CSS Advanced, Popular Posts


So, the problem is how to align a 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 HTML code first:


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

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


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

Note: This code should work for radio buttons as well.

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