switch开关

switch开关

之前在网上看到的一些switch开关,只能改变大块的背景颜色,并不能改变小圆点的背景颜色. 所以写一个可以改变两个地方背景颜色switch开关.

---

这个是关闭状态

---

这个是开启状态

---

// 这个是html代码
  <div class="switch-container">
      <input type="checkbox" id="user-switch">
      <label for="user-switch"></label>
  </div>

// 这个是css代码
  .switch-container{
            height: 25px;
            width: 48px;
            display: inline-block;
            overflow: hidden
        }
        .switch-container input{
            display: none
        }
        .switch-container label{
            display: block;
            width: 100%;
            height: 100%;
            background-color:rgba(0,0,0,.25);
            cursor: pointer;
            border-radius: 25px;
            transition: all .4s ease;
        }
        .switch-container label:before{
            content:'';
            display: block;
            border-radius: 25px;
            height: 21px;
            width: 21px;
            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
            transition: all .4s ease;
            background-color: #fff;
            position: relative;
            right: -2px;
            top: 2px;
        }
   
        .switch-container input:checked~label:before{
            right: -25px;
            background-color: #FCC118;
        }
        
        .switch-container input:checked~label{
            background-color: #1890ff;
        }

大概就是这个样子.