css修改checkbox样式

checkbox样式美化，纯css

方法1、label for input的id，可以实现点击label,使input选中或者取消选中的效果。要绑定id

html

<div>
    <input type="checkbox"class="input_check" id="check3">
    <label for="check3"></label>
</div>
<div>
    <input type="checkbox"class="input_check" id="check4">
    <label for="check4"></label>
</div>

css

 div{position: relative;}
.input_check {position: absolute;visibility: hidden;}

.input_check+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;border-radius:4px;}

.input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;height: 4px;border: 2px solid #fd8845;border-top-color: transparent;border-right-color: transparent;-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);transform: rotate(-45deg);}

方法2、用label包裹input，可以实现点击label,使input 选中或者取消选中。要使用图片

html

<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>

css

input[type="checkbox"]{appearance: none; -webkit-appearance: none;outline: none;display:none}
label{width:14px;height:14px;display:inline-block;cursor:pointer;}

label input[type="checkbox"] + span{width:14px;height:14px;display:inline-block;background:url(../../resources/img/check-img.png) 0 0 no-repeat;}

label input[type="checkbox"]:checked + span{background-position:0 -14px}

img