图像 - 单选按钮答案

【问题标题】：Images - Radiobuttons图像 - 单选按钮
【发布时间】：2015-03-31 20:23:06
【问题描述】：

我想将图像用作单选按钮。在 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>

【问题讨论】：

它实际上正在工作，但复选框位于每个图像的左下角。禁用显示：无标签样式>输入以查看此行为
@FrankProvost 我没有看到复选框？？？并且显示：没有在我的CSS中？ label > input{ /* 隐藏收音机 */ display:none; }
我遇到了同样的问题。看看这个：stackoverflow.com/questions/13613933/…
我指的是@user1756365 - 如果您禁用显示：无，您会看到它们在哪里，因此您可以看到它为什么不起作用。他们的立场是错误的。尝试单击其中一个对象的左下角（在 IE 中），您会看到这将起作用，因为单选按钮位于那里。

标签： html css image radio-button

【解决方案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;

}

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

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

【讨论】：