运用html加css制作一个转换电源开关按键

2021-03-06 01:22 admin
介绍最先建立一个标识键入勾选框,那样大家便可以更改标识的电源开关开启时勾选框被选定的电源开关关断时沒有选定。 input type=“checkbox”id=“toggle” > input type=“checkbox”id=“toggle” >如今大家必须将标识 变更position为relative ,便于大家可使用label::after和款式显示信息为电源开关。display : inline-block; 还可以设定,便于大家能够为标识运用总宽和高宽比。
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: #eee;
border-radius: 20px;
}
然后要我们应用::after 伪类将圆圈⭕️加上到转换电源开关 ,那样看上去更美观大方。
.switch::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
如今大家必须在选定勾选框时变更圆的情况色调和部位,由于假如选定了键入框,则应用 :checked特性,input.随后变更情况色调label并变更圆的部位。
.checkbox:checked+.switch::after {
left: 20px;
.checkbox:checked+.switch {
background-color: #7983ff;
}
这下,入选中勾选框时,就基本彻底一样了,如图所示:

最终大家再掩藏勾选框就大获全胜
.checkbox {
display:none;
}