É criar/transformar um <input type="checkbox">
em um botão toggle sem precisar do elemento <label>
como nestes exemplos:
Um exemplo que eu fiz baseado no código do Andreas Storm foi este:
body {
background: #eee;
}
.toggle {
margin-bottom: 20px;
}
.toggle > input {
display: none;
}
.toggle > label {
position: relative;
display: block;
height: 28px;
width: 52px;
background-color: #f7f7f7;
border: 1px #a2e3e6 solid;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.toggle > label:after {
position: absolute;
left: 1px;
top: 1px;
display: block;
width: 26px;
height: 26px;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
content: '';
transition: all 0.3s ease;
}
.toggle > label:active:after {
transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
background-color: #4cda64;
border-color: #4cda64;
}
.toggle > input:checked ~ label:after {
left: 25px;
}
.toggle > input:disabled ~ label {
background-color: #d5d5d5;
pointer-events: none;
}
.toggle > input:disabled ~ label:after {
background-color: rgba(255, 255, 255, 0.3);
}
<div class="toggle">
<input type="checkbox" id="foo">
<label for="foo"></label>
</div>
<div class="toggle">
<input type="checkbox" id="bar" checked>
<label for="bar"></label>
</div>
<div class="toggle">
<input type="checkbox" id="baz" disabled>
<label for="baz"></label>
</div>
Seria possivel criar algo assim sem label e sem qualquer outro elemento (e sem JavaScript também)?