更换checkbox的原有样式

通常情况下，各个浏览器对的样式不一致，并且不那么美观。所以有时候设计需要我们更换原有的样式：

html：

            <span><input type="checkbox" class="input_check" id="check3" value="123"><label for="check1"></label></span>

css:

    span{
		position: relative;
	  }
	.input_check {
		position: absolute;
		visibility: hidden;
		cursor:pointer;
	}
	.input_check+label {
		display: inline-block;
		width: 14px;
		height: 14px;
		border: 2px solid #677795;
	}
	.input_check:checked+label:after {
		content: "";
		position: absolute;
		left: 2px;
		bottom: 12px;
		width: 9px;
		height: 4px;
		border: 2px solid #677795;
		border-top-color: transparent;
		border-right-color: transparent;
		-ms-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

---

其中必须注意，input的id必须和label的for一致，这是为了点击label联动点击了此checkbox。：after实现的是对号的样式，方框旋转45度实现。

效果如下：