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/

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

1 个答案: