使用突出显示的图像跨浏览器替换HTML复选框

时间:2015-03-18 14:18:27

标签: jquery html css checkbox

我有一个HTML复选框列表,我希望将其更改为可由用户选择或取消选择的图像。

从本质上讲,如果可能,我尝试使用纯CSS来实现this之类的东西。

我使用以下功能在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>
&#13;
&#13;
&#13;

然而,根据caniuse,这不适用于IE。

是否有其他CSS选项可以达到同样的效果?如果没有,是否有一个简单的jQuery解决方案?

1 个答案:

答案 0 :(得分:1)

是的,使用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。