隐藏单选按钮，同时保持其功能

Question

我搜索了SO和Google，但找不到任何相关信息。有什么方法可以隐藏图像旁边的单选按钮（用作图像的标签），但单击标签时仍保持其功能？

我尝试了几种方法，但是似乎使用display:none或visibility:hidden使无线电功能无效。

Answer 1

在 Angular 中，display:none或者visibility:hidden对我不起作用。相反，我使用了：

input[type=radio] {
  opacity: 0;
}

Answer 2

我尝试了几种方法，但似乎使用 display:none 或visibility:hidden 使收音机功能无用。

但它有效。也许你没有设置for属性：

<input id=radio1 name=testradios type=radio><label for=radio1>radio1</label>
<br>
<input id=radio2 name=testradios type=radio><label for=radio2>radio2</label>

#radio1 {
    display: none;
}

或者

#radio1 {
    visibility: hidden;
}

两者都隐藏单选按钮，但标签仍然可点击并检查其单选按钮。

http://jsfiddle.net/m0fbd75w/

Answer 3

只需用另一个颜色与背景相匹配的 div 覆盖它们即可。这将隐藏单选按钮，并且单选按钮仍然可以在单击其标签时起作用。希望有帮助..