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.
