我正在制作拨动开关,我想将拨动旋钮完全垂直地放置在开关内。以下是我尝试实现此目标的方法:
从“./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);
}
我希望 ::after 属性相对于标签绝对定位。因此,当我达到前 50% 时,我希望它能够完全居中。
但它反而溢出了,见图:
现在我想具体澄清的部分是,如果我删除相对位置,我会得到想要的行为。为什么是这样。我预计这仅与相对位置有关。但它只有在没有的情况下才有效。
尝试添加“transform:translateY(-50%);”到 &::{}
之后