CSS组件之CheckBox自定义样式

本文主要是通过CSS实现如何自定义CheckBox的自定义样式。

在项目的开发过程中难免会经常遇到需要自定义CheckBox的样式问题，原生的CheckBox样式实在是很难符合现代人越来越高的审美观。今天在项目的开发过程中又遇到了这个问题，索性直接将代码记录下来，方便后续使用。

首先是html代码如下：

<div class="box-list">
	<div class="opt">
		<input class="magic-checkbox" type="checkbox" name="layout" id="c1">
		<label for="c1">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c2">
		<label for="c2">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c3">
		<label for="c3">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c4">
		<label for="c4">Normal</label>
	</div>
</div>

其次是CSS代码：

/*--相关的单选复选按钮--*/
@keyframes hover-color {       /**复选框或单选框  边框 hover**/
  from {
    border-color: #c0c0c0; }
  to {
    border-colo