前端实例之开关样式的单选

在写前端的时候 ，有很多时候需要美化原有的单选按钮，今天就来一个

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}

实例效果：

关时：

开时：