CODEWITHSUNDEEP
htmlcsscheckbox
Bhawna
Bhawna

Reputation: 705

Label inside styled checkbox is moving, Why?

When I'm working on a checkbox, I have it styled the way I need it to be, but the label beside it keeps moving. When unchecked it aligns itself with the bottom of the box, but then when checked it moves to center align it to the box.

.check {
    width: 100%;
    font-weight: normal;
    margin-bottom: 0px;
}

.check label {
    content: " ";
    width: 18px;
    height: 18px;
    border: 1px solid #dae2e6;
    margin-right: 10px;
    display: inline-block;
}

.check label::after {
    font-size: 13px;
    color: #8e989f;
}

.check input[type="checkbox"]:checked + label::after {
    font-family: "Material Icons";
    content: "\e5ca";
}

.check input[type="checkbox"] {
    left: -9999px;
    position: absolute;
}
.check input[type="checkbox"]:checked + label + div {
    display: inline-block;
} 

<label class="check">
                                <input type="checkbox" value="mandatory" name="checkbox1" id="check3">
                                <label for="check3"> </label>
                                Mark as Mandatory
                            </label>

Fiddle

Upvotes: 0

Views: 170

Answers (1)

AVI
AVI

Reputation: 5703

.check {
    width: 100%;
    font-weight: normal;
    margin-bottom: 0px;
}

.check label {
    content: " ";
    width: 18px;
    height: 18px;
    border: 1px solid #dae2e6;
    margin-right: 10px;
    display: inline-block;
     float: left; /*MODIFICATION */
  
}

.check label::after {
    font-size: 13px;
    color: #8e989f;
    
}

.check input[type="checkbox"]:checked + label::after {
    font-family: "Material Icons";
    content: "\e5ca";
    
}

.check input[type="checkbox"] {
    left: -9999px;
    position: absolute;
    
}
.check input[type="checkbox"]:checked + label + div {
    display: inline-block;
    
}
<label class="check">
 <input type="checkbox" value="mandatory" name="checkbox1" id="check3">
   <label for="check3"> </label>
                                Mark as Mandatory
                            </label>

Just add this float:left property.

 .check label {
    content: " ";
    width: 18px;
    height: 18px;
    border: 1px solid #dae2e6;
    margin-right: 10px;
    display: inline-block;
     float: left; /*MODIFICATION*/

}

Working fiddle

Upvotes: 1

Related Questions