我有一个 HTML 复选框列表,我想将其更改为可供用户选择或取消选择的图像。
本质上,我正在努力实现类似 this 的目标如果可能,使用纯 CSS。
我已经在 Chrome 中使用了它:
.check_test {
width: 200px;
height: 200px;
background: blue;
-webkit-appearance: none;
}
.check_test:checked {
border: 2px solid blue;
}
<form>
<input class="check_test" type="checkbox" name="check1" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Croquetplayers.jpg/220px-Croquetplayers.jpg); " />
</form>
然而,根据caniuse这不适用于 IE。
是否有另一个 CSS 选项可以达到同样的效果?如果没有,是否有简单的 jQuery 解决方案?
最佳答案
是的,使用 label
您需要为复选框分配一个 id。
http://jsfiddle.net/k47qcb7d/2/
.check_test:checked + label {
position: relative;
}
.check_test:checked + label:before {
display: block;
content: "";
height: 30px;
width: 100%;
background: black;
position: absolute;
left: 0;
bottom: 0;
}
IE9+,但如果你使用 jQuery 做选择器,我认为它可以在所有甚至 IE6 上工作。
关于jquery - 使用突出显示的图像跨浏览器替换 HTML 复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29124522/