快速掌握—HTML快速实现自定义Input开关
似俗似不俗 人气:1HTML
<input id="customSwitch" type="checkbox" />
<label for="customSwitch" class="switch"></label>
CSS
/* 定义全局变量 */
:root {
--base_color: rgba(0, 0, 0, 0.25);
--act_color: #5dcb61;
}
/* 隐藏input输入框 */
#customSwitch {
position: absolute;
left: -9999px;
}
/* 设置自定义颜色 */
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: var(--base_color);
border-radius: 20px;
transition: all 0.3s 0s;
}
/* 开关圆球 */
.switch::after {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: white;
transition: all 0.3s 0s;
}
input[type="checkbox"]:checked + .switch::after {
transform: translateX(20px);
}
input[type="checkbox"]:checked + .switch {
background-color: var(--act_color);
}
核心知识点
隐藏真实input输入框,通过label for属性与input输入框绑定。
label标签本身作为椭圆形背景,用伪类作为开关圆球。
input选中后,需要单独设置label标签本体和伪类的移动
加载全部内容
- 猜你喜欢
- 用户评论