html - 图像 - 单选按钮

Question

我想使用图像作为单选按钮。 在 Chrome 和 Firefox 中一切正常。但是在IE中它不起作用...... 测试网址:https://webshop.haco.com/calculator1/

CSS 和 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>

Answer 1

我将 css 更改为以下内容，它在 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;

}

不要忘记标签的相对位置。

可能不是最好的解决方案，但效果很好。