利用input:checkbox模拟开关按钮

    <style>
        input[type="checkbox"] {
          -webkit-appearance: none;                   /*去掉复选框原有样式*/
        }
        input[type="checkbox"]:checked + label,
        input[type="checkbox"]:not(:checked) + label {
          background-color: #e0e0e0;
          display: inline-block;
          height: 25px;
          width: 50px;
          border-radius: 25px;
          position: relative;
          -webkit-transition: background-color 0.4s;  /*背景颜色变换增加过度*/
          transition: background-color 0.4s;
        }

        input[type="checkbox"]:checked + label:after,
        input[type="checkbox"]:not(:checked) + label:after {
          background-color: #fff;
          content: " ";
          height: 21px;
          width: 21px;
          border-radius: 21px;
          position: absolute;
          left: 4px;
          top: 2px;
          -webkit-transition: left 0.4s;              /*按钮移动增加过度*/
          transition: left 0.4s;
        }
        input[type="checkbox"]:checked + label {
            background-color: rgb(60, 160, 155);
        }
        input[type="checkbox"]:checked + label:after {
          left: 25px;
        }
    </style>
      <div>
        <input id="check" type="checkbox">
        <label for="check"></label>
      </div>