I'm new to HTML and CSS, and I've created an HTML code for on/off buttons. However, my buttons are not functioning as expected. I've tried troubleshooting but haven't been able to pinpoint the issue. Here is my HTML snippet:
.s {
position: relative;
}
.s input {
display: none;
}
.s1 {
width: 100px;
height: 40px;
background: #ccc;
display: block;
overflow: hidden;
cursor: pointer;
transition: 0.4s;
}
.s1:before {
content: '';
width: 32px;
height: 32px;
left: 4px;
bottom: 4px;
background: white;
position: absolute;
}
.s input:checked+.s1 {
background: #00bcd4;
}
.s input:checked+s1:before {
left: 64px;
}
.s2 {
width: 100px;
height: 40px;
background: #ccc;
display: block;
overflow: hidden;
cursor: pointer;
transition: 0.4s;
}
.s2:before {
content: '';
width: 32px;
height: 32px;
left: 4px;
bottom: 4px;
background: white;
position: absolute;
}
.s input:checked+.s2 {
background: #00bcd4;
}
.s input:checked+s2:before {
left: 64px;
}<label class="s">
<input type="checkbox">
<span class="s1"> </span>
</label>
<label class="s">
<input type="checkbox">
<span class="s2"> </span>
</label>Any assistance you can provide would be greatly appreciated.