切换开关
使用纯CSS创建一个切换开关。
- 使用
for
属性将<label>
与复选框<input>
元素关联起来。 - 使用
<label>
的::after
伪元素创建一个圆形的开关按钮。 - 使用
:checked
伪类选择器来改变按钮的位置,使用transform: translateX(20px)
和开关的background-color
。 - 使用
position: absolute
和left: -9999px
来视觉上隐藏<input>
元素。
<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 20px;
transition: all 0.3s;
}
.switch::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
background-color: #7983ff;
}
.offscreen {
position: absolute;
left: -9999px;
}