5
Is to create/transform a <input type="checkbox">
on a toggle button without needing the element <label>
as in these examples:
An example I made based on the code of Andreas Storm it was this:
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>
It would be possible to create something like this without label and without any other element (and without Javascript too)?
Better apply
all: unset;
the class.btn
, because in the case of the specific example would affect all radios, but only radios with the btn class would have complete effects, so other radios without the class would be bugged. Or exchange the class . btn for the widget type selector[type="checkbox"]
on all selectors.– Guilherme Nascimento
@Guilhermenascimento yes you’re right, as I was doing in a test environment I didn’t even notice it, but it already includes everything in the same class and I removed the global checkbox selector
– hugocsl