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:
- Inputs must be on their own line.
- Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
- 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:
- Inputs must be on their own line.
- Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
- 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
.
.checkbox { display: inline-block; vertical-align: top; padding-left: 25px; position: relative;}
.checkbox input { position: absolute; left: 0; top: 0;}
<label class="checkbox"> <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox"> Tick This Box</label><label class="checkbox"> <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox"> This is a multi line label with a lot of text. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet...</label>
Related Topics
How to Remove Underline from a Link in Html
Removing Whitespace Between HTML Elements When Using Line Breaks
Rotate Objects Around Circle Using Css
Why Does Firebug Add ≪Tbody≫ to ≪Table≫
Flex Container Min-Height Ignored in Ie
Properly Sizing and Aligning the Flex Item(S) on the Last Row
How to Make a Curved Edge Hexagon by Using Css
How to Create a Template in Html
Ie9 Float With Overflow:Hidden and Table Width 100% Not Displaying Properly
Printing "≪Html≫" Using Html
Get Second Line of Bullet Item to Indent as First Part - Not Underneath the Bullet
How to Add 1Px Margin to a Flex Item That Is Flex: 0 0 25%
Make Iframe to Fit 100% of Container'S Remaining Height
Show Loading Screen When Navigating Between Routes in Angular 2