Currently tackling a challenge with a toggle switch - the goal is to position the toggle knob perfectly vertical within the switch. Here's my attempted solution:
import style from "./Toggle.module.scss";
export default function Toggle() {
return (
<>
<input type="checkbox" id="toggle" className={style.toggle} />
<label htmlFor="toggle" className={style.label} />
</>
);
}
.toggle {
height: 0;
width: 0;
opacity: 0;
}
.label {
width:60px;
height: 30px;
border-radius:30px;
display: block;
background-color: #ebebeb;
box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2) inset;
left:10px;
padding-left: 5px;
position: relative;
&::after {
content: '';
position: absolute;
width: 23px;
height: 23px;
border-radius: 50px;
background-color: green;
top: 50%;
transition: 0.3s;
}
}
.toggle:checked ~ .label::after{
transform: translateX(32px);
}
The objective is for the ::after property to be absolutely positioned relative to the label for perfect centering. However, it overflows as shown in the image:
https://i.sstatic.net/AJxsqWa8.png
The question is why does it work better without 'position: relative' than with 'relative'? Additionally, adding 'transform: translateY(-50%);' results in a diagonal movement when clicked.