switch 按钮

  /* 必须为类型为[checkbox]的[input]添加 switch 类名才能实现以下效果 */
  input[type=checkbox].switch{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 2.8rem;
    height: 1.5rem;
    border: 1px solid #cccccc;
    background-color: #cccccc;
    border-radius: 0.7rem;
}
input[type=checkbox].switch::after{
    content: "";
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 2px #999;
    transition: left 0.1s;
    position: absolute;
    top: 0px;
    left: 0;
}
/* 
默认不被选中
当input[type=checkbox]被选中时，元素显示以下样式 
*/
input[type=checkbox].switch:checked{
    background-color: #32b258;
}
/* 
当input[type=checkbox]被选中时，伪元素显示以下样式--位置发生变化 
*/
input[type=checkbox].switch:checked::after{
    position: absolute;
    top: 0px;
    left: 50%;
}

/* 状态 */
input[type=checkbox]:checked.switch.switch-info{
    background-color: #31b0d5;
}
input[type=checkbox]:checked.switch.switch-danger{
    background-color: #ff1022;
}
input[type=checkbox]:checked.switch.switch-primary{
    background-color: #409eff;
}
input[type=checkbox].switch.switch-primary{
    background-color: red;
}
input[type=checkbox]:checked.switch.switch-warm{
    background-color: #e6a23c;
}

例子程序：

    <input type="checkbox" class="switch switch-info">
    <input type="checkbox" class="switch switch-primary">
    <input type="checkbox" class="switch switch-danger">
    <input type="checkbox" class="switch switch-warm">
    <input type="checkbox" class="switch">