CSS开关按钮

目录

前言

原理

开关

代码

HTML

CSS

---

前言

最近制作后台页面时，发现普通的多选框过于单调，而使用开关按钮要引入Element-UI之类的东西，如果单独要使用这一个按钮，引入库代价比较大，没有必要为了这一个效果引入库，所以想使用HTML+CSS修改默认的多选框按钮。

演示地址：开关按钮

原理

因为多选框有一个特性，点击之后多选框的状态会进行保留，不会因为鼠标焦点的变化而发生变化。

由于多选框是不能修改默认样式，所以使用label对多选框进行绑定，label可以修改各类样式，然后将多选框隐藏起来，这样只需修改label样式就可以了。

圆球和背景颜色分别是 label::before 和 label::after。

开关

label和多选框绑定，所以点击label时，多选框也会发生变化。input:checked就是点击之后的状态。

代码

HTML

<input type="checkbox" id="a">
<label for="a"></label>

CSS

    * {
        margin: 0;
        padding: 0;
    }

    input {
        display: none;
    }
    label {
        display: block;
        width: 200px;
        height: 60px;
        border-radius: 30px;
        background: rgb(128,128,128);
        border: 1px solid #eee;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    label::before {
        display: block;
        content: '';
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: white;
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
    }
    label::after {
        display: block;
        content: '';
        width: 0;
        height: 100%;
        background: #006BB0;
        transition: all .3s;
        border-radius: 10px;
    }
    input:checked + label::before {
        left: 140px;
    }
    input:checked + label::after {
        width: 100%;
    }