今天在用el-switch
的时候遇到点小问题,然后想着自己写一个css的吧。
其实写过不知几回了,纯当记录一下。
结合switch开关的样子,其实用css实现挺简单的。
原理:
- 相邻兄弟选择器+伪类选择器的作用
- chebox和label
先分两个步骤:
一、先画外观
如果只是单纯画一个开和一个关:
<div for="switcher-check" class="switcher-layer">
<span class="switcher-point"></span>
</div>
那只要每一个只需要:一个椭圆外壳加一个内部小圈圈,改变一下颜色,调整一下小圈圈在内部的左边距,开和关就出来了。
比如,赋予上面元素这样的css,就出来一个关按钮了。
.switcher-layer{
cursor: pointer;
width: 80px;
height: 40px;
display: block;
border-radius: 20px;
background-color: #aaa;
}
.switcher-point{
width: 30px;
height: 30px;
display: inline-block;
background-color: white;
border-radius: 50px;