Images - Radiobuttons

Question

I want to use images as radiobuttons. Everything is ok in Chrome and Firefox. But in IE it doesn't work... Test URL: https://webshop.haco.com/calculator1/

CSS and HTML:

label > input{ /* HIDE RADIO */
  display:none;

}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;

}

<label>
<input type="radio" name="shape" value="round" checked />
<img id="roundShape" src="css/images/round.jpg">
</label>

it actually is working, but the checkboxes are in the bottom left corner of each image. disable the display: none style of label > input to see this behaviour — Frnak, Mar 31 '15 at 12:11
@FrankProvost I don't see the checkboxes??? And the display:none is in my css? label > input{ /* HIDE RADIO */ display:none; } — user1756365, Mar 31 '15 at 12:13
I had the same problem. Check out this: http://stackoverflow.com/questions/13613933/styling-radio-button-not-work-in-ie-and-firefox — Tommy D, Mar 31 '15 at 12:17
i was refering to that @user1756365 - if you disable the display: none you see where they are and therefore you can see why it's not working. Their position is just wrong. Try to click in the bottom left corner of one of your objects (in IE) you will see that this will work, because the radiobuttons are positioned there. — Frnak, Mar 31 '15 at 12:24

score 0 · Answer 1 · answered Mar 31 '15 at 12:23

I changed the css to the following and it worked in IE

label {
   position: relative;
}

label > input{ /* HIDE RADIO */
   display: block;
   opacity: 0;
   position: absolute;
   left: 0; right: 0; top: 0;
   margin: 0 auto;
   width: 100%; height: 100%;
}

label > input + img{ /* IMAGE STYLES */
   cursor:pointer;
   border:2px solid transparent;

}

dont forget about the relative position for the label.

might not be the nicest solution, but works well.

Images - Radiobuttons

1 Answers1