如何制作具有大目标区域的 HTML 单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7727255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make an HTML radiobutton with a big target area?
提问by Only Bolivian Here
Something like this:
像这样的东西：
Where the user would click on any area of the button and it would select that radio button.
用户点击按钮的任何区域，它会选择那个单选按钮。
Any suggestions?
有什么建议？
As far as I can tell, radio buttons as self closed, and can't wrap around other elements.
据我所知，单选按钮是自关闭的，不能环绕其他元素。
回答by Wesley Murch
The best way is to just wrap the <input>in its <label>, as clicking a label also has the effect of focusing its associated input:
最好的方法是将 包裹<input>在它的 中<label>，因为单击标签也具有聚焦其相关输入的效果：
<label>
<input name="transfer" type="radio">Bank Deposit
</label>
No javascript required: Demo: http://jsfiddle.net/GTGan/
不需要 javascript：演示：http: //jsfiddle.net/GTGan/
If you need to style the label text separately, just wrap it in a <span>.
如果您需要单独设置标签文本的样式，只需将其包裹在<span>.
回答by Andres Kalev Rebane
use Bootstrap, to create buttons around radiobuttons:
使用 Bootstrap，围绕单选按钮创建按钮：
<label class="btn btn-lg btn-default">
<input type="radio"> Something
</label>
回答by ph33nyx
Have you tried using the LABEL tag? For accessibility sake we should be using label tags to associate labels to form controls all of the time. Not only does that help tie things together for screen readers, but it also makes the label as well as the control clickable.
您是否尝试过使用 LABEL 标签？为了可访问性，我们应该始终使用标签标签来关联标签以形成控件。这不仅有助于将屏幕阅读器的内容联系在一起，而且还使标签和控件可点击。
You can read a bit more detail and find an example here: http://webaim.org/techniques/forms/screen_reader#labels
您可以阅读更多详细信息并在此处找到示例：http: //webaim.org/techniques/forms/screen_reader#labels
回答by chabuya
You could use javascript for achieving this effect by giving it an onClick event, or you could just use jQuery in combination with some gui-plugins. I'd prefer this solution for cross-browser compatibility.
您可以通过给它一个 onClick 事件来使用 javascript 来实现这种效果，或者您可以将 jQuery 与一些 gui 插件结合使用。我更喜欢这种跨浏览器兼容性的解决方案。
