How To Align Checkboxes and Their Labels Consistently Across Browsers

While checkboxes are relatively straightforward to implement, aligning them with their labels can be a challenge, as each browser renders them differently. In this article, we will explain how to align checkboxes and their labels consistently across all browsers using CSS.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Wrap the Checkbox and Label in a Container

The first step is to wrap the elements in a container so we can use it to apply styling to both the checkbox and the label.

<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Checkbox Label</label>
</div>

Style the Checkbox and Label

Once we have our container, we can use CSS to position the checkbox and label, adjust their size, and style them.

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 10px;
}

.checkbox-container label {
  margin: 0;
}

The display: flex; property allows us to align the checkbox and label vertically. The align-items: center; property centers the checkbox and label vertically within the container.

The margin-right: 10px; property adds a small amount of space between the checkbox and the label. The margin: 0; property removes any margin that may be added by default by the browser.

Styling the Checkbox to make it visually appealing

In addition to aligning the checkbox and label, we can also style the checkbox to make it more visually appealing.

.checkbox-container input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.checkbox-container input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

.checkbox-container input[type="checkbox"]:checked::before {
  content: "\2713";
  font-size: 16px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The appearance: none; property removes the default styling of the checkbox, allowing us to create our own custom style. The width and height properties set the size of the checkbox. The border property creates a border around the checkbox, and the border-radius property rounds the corners of the checkbox.

The background-color property sets the background color of the checkbox, and the cursor: pointer; property changes the cursor to a pointer when the user hovers over the checkbox.

The input[type="checkbox"]:checked selector styles the checkbox when it is checked. The background-color property changes the background color of the checkbox, and the border-color property changes the color of the border.

The input[type="checkbox"]:checked::before pseudo-element adds a checkmark to the checkbox when it is checked. The content property adds the checkmark character, and the font-size property sets the size of the checkmark. The color property sets the color of the checkmark, and the position: absolute; property positions the checkmark in the center of the checkbox.

Conclusion

By wrapping checkboxes and their labels in a container and applying CSS styling, we can align checkboxes and their labels consistently across all browsers, as well as create a more visually appealing and user-friendly form element. Be sure to check out our other CSS articles while you’re here!