图像 - Radiobuttons

Question

我想将图像用作radiobuttons。 在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;

}

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

可能不是最好的解决方案，但运作良好。