更改单选按钮文本的字体大小答案

【问题标题】：changing the font size of radio button text更改单选按钮文本的字体大小
【发布时间】：2011-05-26 10:57:20
【问题描述】：

我正在尝试更改某些单选按钮的字体大小：

<input type="radio" name="rdDate" id="ShowAll" value="Show All" style="border-style:none;margin-left:0px;font-size:11px;"/>Show All
    <input type="radio" name="rdDate" id="ShowCurrent" value="Show Current" style="border-style:none;font-size:11px;"/>Show Current

但添加 style="font-size:11px;"到输入标签不会改变文本大小。我发现这样做的唯一方法是将文本包装在字体标签中，但是您的字体大小被限制在 1 到 7 之间，这些都不是我需要的正确大小。

有人知道如何更改单选按钮文本的字体大小吗？

【问题讨论】：

标签： html

【解决方案1】：

文本在单选按钮旁边，而不是在其中。

首先，添加一个<label> 元素（确保for 属性与与之关联的输入的id 匹配，这将链接它们，因此人们将拥有更大的点击目标，屏幕阅读器用户将知道哪个标签属于哪个控件）。

然后设置标签样式。

【讨论】：

解释：for-attribute 必须与您输入的name-attribute 相同。这些应该重命名为rdDate1 和rdDate2 才能正常工作。
@Tim — 不！ id 属性！如果您更改名称，那么单选按钮将不再是一个组！

【解决方案2】：

用<label>标签包裹文本，然后你可以设置这个标签的样式。

<input type="radio" name="rdDate" id="ShowAll" value="Show All" style="border-style:none;margin-left:0px;font-size:11px;"/><label style="font-size: 11px;">Show All</label>
<input type="radio" name="rdDate" id="ShowCurrent" value="Show Current" style="border-style:none;font-size:11px;"/><label style="font-size: 11px;">Show Current</label>

同时考虑不使用内联样式并使用外部样式表。

【讨论】：