如何制作具有大目标区域的 HTML 单选按钮?单选、按钮、区域、目标

2023-09-06 19:20:19 作者:你是我年少时最冒险的梦

类似这样的:

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

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>.