在写前端的时候 ，有很多时候需要美化原有的单选按钮，今天就来一个
HTML：
<label class="ui-switch"> <input type="checkbox" name="post[invoice]" role="switch" value="1" class="js-change-show-hide js-open-invoice" data-toggle=".js-pay-invoice"> <span class="switch"> <span class="btn"></span> </span> </label>
CSS：
.ui-switch{display: inline-block}
.ui-switch input{display: none}
.ui-switch .switch{position: relative; height: 22px; width: 44px; box-sizing: border-box; display: inline-block; vertical-align: middle; padding: 2px; border-radius: 11px; background: #e0e6ed; cursor: pointer; transition: background .2s}
.ui-switch .open{display: none}
.ui-switch .btn{height: 18px; width: 18px; position: absolute; left: 2px; top: 2px; border-radius: 10px; background: #fff; transition: left .2s}
.ui-switch input:checked+.switch{background: #2769dc}
.ui-switch input:checked+.switch .btn{left: 24px}
.ui-switch input:checked~.open{display: inline}
.ui-switch input:checked~.close{display: none}
.ui-switch .on{background: #2769dc}
.ui-switch .on .btn{left: 24px}实例效果：
关时：
开时：
