html怎么把开关放到中间,快速掌握—HTML快速实现自定义Input开关

HTML

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标签本体和伪类的移动

分类：

技术点：

友情链接：

navicat拆迁律师素材中国By © 2017 likecs 版权所有.

粤ICP备12038626号

Powered By WordPress . Theme by Luju