How to Achieve Consistent Checkbox and Label Alignment Across Browsers?

How to Align Checkboxes and Their Labels Consistently Cross-Browsers

This question highlights the challenges faced in aligning checkboxes and their labels consistently across different browsers, particularly Safari, Firefox, and IE. The provided code showcases the standard HTML and CSS for a form containing a checkbox and its label.

One solution that was once popular involved using vertical-align: baseline on the input to align the checkbox correctly in Safari. However, this approach often resulted in misalignments in Firefox and IE.

After extensive testing and tweaking, a different solution emerged, which involves the following CSS properties:

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

This solution aligns the checkbox and its label on separate lines and ensures vertical alignment regardless of the browser. It also indents the label text correctly after wrapping. With this approach, checkboxes and their labels can be consistently aligned cross-browsers.

The above is the detailed content of How to Achieve Consistent Checkbox and Label Alignment Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!