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

Question

我有一个 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>

但是，根据 caniuse 这不适用于 IE。

是否有另一个 CSS 选项可以达到同样的效果？如果没有，是否有简单的 jQuery 解决方案？

Answer 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上工作。

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

Cross-browser replacement of HTML checkbox with highlighted image

html

css

checkbox

jquery