CODEWITHSUNDEEP
htmlcss
fightstarr20
fightstarr20

Reputation: 12598

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

Upvotes: 5

Views: 12651

Answers (2)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 11

Bhupinder kumar
Bhupinder kumar

Reputation: 556

Run the snippet its working perfect 

.checkbox {
  padding-left:10px;
  position: relative;
}

.checkbox input {
 float:left
}
<label class="checkbox">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    Tick This Box
</label>

Upvotes: 0

Related Questions