width 100% on checkboxes makes it center aligned. How can I counter this?

Question

I am setting all inputs to a 100% width via CSS. However, checkboxes are center aligned for some reason. Anyway to counter this? I don't want to have to use attribute selection via css since they're not fully supported.

Answer 1

You need to wrap your checkbox in another element:

<div class="checkbox">
    <input type="checkbox" value="check-value">Human readable value
</div>

In CSS:

.checkbox {
    width: 100%;
    text-align: left;
}

Answer 2

Check this

input.checkbox 
{ 
    text-align: left; 
    margin: 0 auto;
}

Answer 3

You need to set the width back to auto (width: auto).

If you don't want to use attribute selectors, then you must find another selector that matches the checkboxes. This may well involve adding additional markup (such as a class).