user3774924 user3774924 - 2 months ago 14
CSS Question

Is there any fix for divs inside of label

I just spent a long time making a css animation with

s inside a
(with the press of the label initiating the animation), just to realize that having
s inside a
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>

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.


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.