快速掌握—HTML快速实现自定义Input开关
用最短的时间，学习最有用的东西。
HTML
<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标签本体和伪类的移动
版权声明：本文为bgd150809213原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。