fightstarr20 fightstarr20 - 9 days ago 5
CSS Question

Align checkbox and label using CSS

WooCommerce outputs its checkboxes like this...



<label class="checkbox ">
<input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
Tick This Box
</label>





This results in alignment issues...

enter image description here

I can fix them by editing the way checkboxes are output but before I do, is there a simpler way with CSS to get them to look like this?

enter image description here

Answer

You can place checkbox with position: absolute.

.checkbox {
  display: inline-block;
  vertical-align: top;
  padding-left: 25px;
  position: relative;
}

.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
}
<label class="checkbox">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    Tick This Box
</label>
<label class="checkbox">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    This is a multi line label with a lot of text. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet...
</label>

Comments