How to Align Checkboxes and Their Labels Consistently Cross-Browsers

How to align checkboxes and their labels consistently cross-browsers

Warning! This answer is too old and doesn't work on modern browsers.


I'm not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it's still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).

As already noted many times in the comments, this answer does not work on most browsers anymore (and seems to be failing to do that since 2013).


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:

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;
}
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>

How to align checkboxes and their labels consistently cross-browsers

Warning! This answer is too old and doesn't work on modern browsers.


I'm not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it's still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).

As already noted many times in the comments, this answer does not work on most browsers anymore (and seems to be failing to do that since 2013).


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:

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;
}
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>

Align vertically checkboxes with the input fields and labels

based on the final result you want to achieve, I think you should give all the labels you have the same width, so the inputs can adjust to the left of these labels.

this is a sample example :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="field">
<label class="label">First name</label>
<input type="text"/>
</div>
<div class="field">
<label class="label">last name</label>
<input type="text"/>
</div>
<div class="field">
<label class="label" for="favoriteColor">Favorite Color</label>
<select name="favoriteColor" id="favoriteColor" class="select-field">
<option value=""></option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
</select>
</div>
<div class="field">
<label class="label">Sauces</label>
<div class="checkbox-wrapper">
<div class="checkboxes">
<input type="checkbox" id="sauces" name="sauces" value="ketchup">
<label for="ketchup">Ketchup</label>
</div>
<div class="checkboxes">
<input type="checkbox" id="sauces" name="sauces"
value="mustard">
<label for="mustard">Mustard</label>
</div>
</div>
</div>

</body>
</html>

the style :

.field {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
}
.label {
width: 130px;
display: inline-block;
}

width that all the labels should be in the left and have the same width, for the buttons you can put them in flex container and center them,

Aligning the text with checkbox

Wrap your input & label one container apply flex

<div style="display:flex">    <input type="checkbox" name="optIn" value="Y" style="margin-right:10px;">    <label for="ext-comp-1035">I would like to receive email from you. By checking the box you agree that you have read the Privacy Policy and Terms of Use</label>    </div>

Align checkbox and label using CSS

You can place checkbox with position: absolute.