How to align checkboxes and their labels consistently cross-browser with CSS?

Spread the love

Sometimes, we want to align checkboxes and their labels consistently cross-browser with CSS.

In this article, we’ll look at how to align checkboxes and their labels consistently cross-browser with CSS.

How to align checkboxes and their labels consistently cross-browser with CSS?

To align checkboxes and their labels consistently cross-browser with CSS, we can use flexbox.

For instance, we write

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

to add a checkbox in the label element.

Then we write

label {
  display: flex;
  align-items: center;
}

input[type="radio"],
input[type="checkbox"] {
  flex: none;
}

to make the label a flex container.

Then we add the flex: none; to the checkbox to stop their sizes and position from changing.

Conclusion

To align checkboxes and their labels consistently cross-browser with CSS, we can use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *