简单switch【css】
时间：2023-03-31 11:33:26
CSS
今天在使用el-switch的时候遇到了一个小问题，然后想着自己写一个css。其实已经写了好几遍了，还是记录一下吧。结合switch开关的出现，用css实现其实还是挺简单的。原理：相邻兄弟选择器+伪类选择器的作用Chebox和label分为两步：1.先画外观。如果你只是简单地绘制一个打开和关闭：
只要每个一个只需要：一个椭圆壳加一个内圈小圆圈，改变颜色，调整小圈圈内左边距，onandoff就出来了。例如，如果你给上面的元素这样的css，就会出现一个关闭按钮。.switcher-layer{游标：指针；宽度：80px；高度：40px；显示：块；边界半径：20px；背景颜色：#aaa;}.switcher-point{宽度：30px;高度：30px；行内块；背景色：白色；边界半径：50px；margin:5px;}至于打开，只需要改变shell的background-color，调整margin-left圆圈即可。2、checkbox的伪类：checked从第一步的实现来看，只要能控制好，switch的状态和元素的styleclass都可以随之改变。开关的状态很容易处理。当checkbox的选中状态由checked属性控制，但是checkbox有自己的style，如果和第一部分的style冲突怎么办？利用labelfor和input的关系隐藏checkbox，留下label显示checkbox，把样式的第一部分放在label上。这时候关于checked状态，就是checkbox和他家checked的事情，标签作为触发状态变化，那么如何让state对标签产生相应的影响呢？这就是相邻元素和:checked伪选择器发挥作用的地方。我们先来看看html标签怎么写>
关键是这里input和label的邻接和顺序，结合小弟选择器看样式。switcher{}/*隐藏输入~*/.switcherinput[type="checkbox"]{display:none;}.switcher-layer{cursor:pointer;宽度：80px；高度：40px；显示：块；边界半径：20px；背景色：#aaa；过渡：背景.6s;}.switcher-point{宽度：30px;高度：30px；显示：内联块；背景色：白色；边界半径：50px；:margin.6s;}/*当checkbox被选中时，它的兄弟改变了背景颜色*/.switcherinput[type="checkbox"]:checked~.switcher-layer{background-color:green;}/*And小弟的小圆圈往右走*/.switcherinput[type="checkbox"]:checked~.switcher-layer.switcher-point{margin-left:45px;}在未勾选状态下，显示标签正好是A“off”状态，显示“off”的效果，当复选框被选中时，:checked伪类生效，它小弟的一个选择器收到了“call”，所以有“开”的效果~例子点这里印象最后，adjacentselector本身很少用到，但是adjacentselector和:checked伪-类都是用来实现状态切换的，确实是一个很好的做法，不仅有checkbox，还有radio，可以用来实现tab切换的效果
