如何制作具有大目标区域的 HTML 单选按钮? [英] How can I make an HTML radiobutton with a big target area?

问题描述

类似这样的:

用户点击按钮的任何区域并选择该单选按钮.

Where the user would click on any area of the button and it would select that radio button.

有什么建议吗?

据我所知，单选按钮是自关闭的，不能环绕其他元素.

As far as I can tell, radio buttons as self closed, and can't wrap around other elements.

推荐答案

最好的办法是把 <input> 包裹在它的 <label> 中，因为单击标签也具有聚焦其相关输入的效果:

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:

<label>
    <input name="transfer" type="radio">Bank Deposit
</label>

无需 javascript:演示:http://jsfiddle.net/GTGan/

No javascript required: Demo: http://jsfiddle.net/GTGan/

如果您需要单独设置标签文本的样式，只需将其包装在 <span> 中即可.

If you need to style the label text separately, just wrap it in a <span>.

这篇关于如何制作具有大目标区域的 HTML 单选按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！