Forms with CSS (3 of 3) – Checkboxes
The first two posts in this series showed a way to markup an HTML form, and apply styles to it. This works well for any field where the label comes before the field.
Typically for checkboxes, we put the checkbox field first, with the label after it. The HTML code is similar to the other form fields. The differences are that the <label> is now after the <input> tag, and we’ve wrapped this pair in a <div> section with a class attribute.
<div class="alignMe"> <input id="employee" type="checkbox" name="employee" /> <label for="employee">ISU Employee</label> </div>
Now we add a couple styles that hook into this new class:
fieldset .alignMe {
display:block;
margin-left:6.9em;
}
fieldset .alignMe input {
width:20px;
}
With these added, we end up with a form that looks like:
The extra <div> tags and the corresponding styles allow you to shift the checkbox so it’s in line with the other form fields. You can use this technique on other form elements such as radio buttons as well.
Related Articles:
Forms with CSS (1 of 3) – HTML Markup
Forms with CSS (2 of 3) – Styles
