replace radio with image

Question

I want to replace my radio buttons with images and without jQuery^^ if its possible. So here's my fiddle, images are shown in the fiddle-file:

<input type="radio" class="btn1" value="" name="item" id="radio1">
<label class="label1" for="radio1"> <img src="IMAGE"> </label>

.btn1{
  display: none;
 }

.btn1:checked + label {
  opacity: 1;
}

https://jsfiddle.net/yxgvhL2j/

I want to replace the radio button with the cat-image. and If I click at the catbutton(checked) it should show the dog image: http://pix.iemoji.com/images/emoji/apple/ios-9/256/dog-face.png

I tried a lot with display block and none, and integrating the image in the CSS... completely in vain.

Pleaase help help :'-(!

Possible duplicate of [Use Image instead of radio button](http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-button) — bobbi.w, Nov 28 '16 at 14:31

score 1 · Answer 1 · answered Nov 21 '16 at 15:33

Try using background images instead, so you can toggle the other background image on the :checked pseudo class:

Update HTML:

<input type="radio" class="btn1" value="" name="item" id="radio1">
<label class="label1" for="radio1"></label>

Updated CSS:

.btn1{
  display: none;
}

.btn1 + label {
  display: block;
  width: 256px;
  height: 256px;
  background-image: url("http://www.fancyicons.com/free-icons/122/hallowen/png/256/black_cat_256.png");
}

.btn1:checked + label {
  background-image: url("http://pix.iemoji.com/images/emoji/apple/ios-9/256/dog-face.png");
}

Working demo:

https://jsfiddle.net/p30hm73v/

thank you, but unfortunately it doesnt work. the '+' in my CSS does not work, I noticed it, when I used it last week. — bobbi.w, Nov 22 '16 at 08:33

replace radio with image

1 Answers1