Cross-browser replacement of HTML checkbox with highlighted image

Question

I have a list of HTML checkboxes that I'd like to change into images that can be selected or deselected by the user.

In essence I'm trying to achieve something like this using pure CSS, if possible.

I have got it working in Chrome using:

.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>

However, according to caniuse this isn't going to work on IE.

Is there another CSS option that will achieve the same effect? If not, is there a simple jQuery solution?

Stickers · Accepted Answer · 2015-03-18 15:04:18Z

1

Yes, use label you need assign an id to the checkbox.

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+, but if you use jQuery to do the selector, it can work on all even IE6 I think.

edited Mar 18, 2015 at 15:04

answered Mar 18, 2015 at 14:52

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cross-browser replacement of HTML checkbox with highlighted image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related