jquery - 使用图像自定义复选框开/关

Question

我正在尝试使用 css 切换复选框，使用开/关图像进行切换。但是它并没有发生，fiddle .

<div class="checkbox">  
<input id="check1" type="checkbox" name="check" value="check1" data-role="none">  
<label for="check1">I agree</label>  
</div>

input[type=checkbox] {
    display:none;
}
input[type=checkbox]:checked + label:after {
    background: transparent url('../img/Check_box_2.png.png') no-repeat center!  important; 
}
.checkbox label:before {
    background: transparent url('../img/Check_box.png.png') no-repeat center center !important; 
}

Answer 1

不太确定你在问什么，但我很确定这会帮助你走上正确的道路:

input[type=checkbox] {
    display:none;
}
input[type=checkbox]:checked + label:after {
    background: transparent url('http://lorempixel.com/output/abstract-q-c-32-32-9.jpg') no-repeat center! important;
    content: ".";
    width: 32px; height: 32px;
    display: inline-block;
}
.checkbox label:before {
    background: transparent url('http://lorempixel.com/output/abstract-q-g-32-32-4.jpg') no-repeat center center !important;
    content: ".";
    width: 32px; height: 32px;
    display: inline-block;
}

此处演示:http://jsfiddle.net/c8WV9/1/