用最简单的css3代码实现定制switch开关

 

<style>

/* 滑动开关 */

.switch {

  width: 1.57333333rem;

  height: 0.74666667rem;

  border-radius: 0.37333333rem;

  position: relative;

  background-color: none;

  *zoom: 1;

}

.switch .checkbox {

  width: 1.57333333rem;

  height: 0.74666667rem;

  border-radius: 0.37333333rem;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 10000;

  background-color: #ddd;

  transition: all 0.2s ease-in-out;

}

.switch .control {

  margin: 0;

  width: 0.69333333rem;

  height: 0.69333333rem;

  border-radius: 0.34666667rem;

  outline: 0;

  position: absolute;

  top: 0.02666667rem;

  left: 0.02666667rem;

  z-index: 10001;

  -webkit-appearance: none;

  background-color: #fff;

  *zoom: 1;

  transition: all 0.2s ease-in-out;

}

.switch .control:checked {

  left: 0.85333333rem;

}

.switch .control:checked + .checkbox {

  background: #79bb19;

}

</style>

<div class="switch">

                  <input type="checkbox" id="control" class="control">

                  <label for="control" class="checkbox"></label>

                </div>