纯css改变复选框的默认样式

怎样使用css实现改变默认复选框的样式？效果及方法如下：

1、未选中状态下

左侧是默认样式，右侧的为设计的样式

2、选中状态下

实现原理：

实现的最终目标，没有默认的checkbox存在，只有我们设计的最终效果样式存在，而且能够选中，未选中效果。

1）隐藏原有的checkbox

2）利用position，将设计的checkbox放置到原来默认的checkbox的位置上

3）采用transition设计checkbox的选中效果

具体代码：

html部分：

<label class="checkbox-inline i-checks">
	<input type="checkbox" value="" />
	<i></i>
	羽毛球
</label>

css部分：

            .i-checks{
				cursor: pointer;
				padding-top: 0 !important;
				padding-left: 0 !important;
			}
			.checkbox-inline{
				position: relative;
				display: inline-block;
				padding-left: 20px;
				margin-bottom: 0;
				font-weight: 400;
				vertical-align: middle;
				cursor: pointer;
			}
			.i-checks>i:before{
				position: absolute;
				top: 50%;
				left: 50%;
				width: 0;
				height: 0;
				background-color: transparent;
				content: '';
				transition: all 0.2s;
			}
			.i-checks input{
				position: absolute;
				width: 20px;
				height: 20px;
				opacity: 0;
				margin: 0 !important;
				left: 0;
				top: 0;
			}
			
			.i-checks input:checked+i:before{
				top: 4px;
				left: 4px;
				width: 10px;
				height: 10px;
				background-color: #23b7e5;
			}
			.i-checks>i{
				position: relative;
				display: inline-block;
				box-sizing: border-box;
				width: 20px;
				height: 20px;
				line-height: 20px;
				vertical-align: middle;
				background-color: #FFFFFF;
				border: 1px solid #cfdadd;
			}
			.i-checks input:checked+i{
				border: 1px solid #23B7E5; 
			}

最终的效果