user3774924 user3774924 - 21 days ago 10
CSS Question

Is there any fix for divs inside of label

I just spent a long time making a css animation with

div
s inside a
label
(with the press of the label initiating the animation), just to realize that having
div
s inside a
label
is incorrect.
Does anyone know a quick fix for this?
This is the HTML in question:

<input type="checkbox" id="spinner" />
<label for="spinner" id="burger">
<div id="burger-div">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</div>
</label>


The css that animates it, in case it is relevant:

#spinner[type=checkbox]:checked~#burger .horizontal {
opacity: 0;
}
#spinner[type=checkbox]:checked~#burger .diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
#spinner[type=checkbox]:checked~#burger .diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -16px;
}


I appreciate any help.

Answer

The valid HTML would be to use a <span> instead of a <div>. Reason is that label represents a text construct and div represents a container object.

Comments