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

Question

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

<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，而这些都不是我需要的正确大小。

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

- user517406

Answer 1

文本位于单选按钮旁边，而不是内部。

首先，添加一个元素（确保“for”属性与其关联的输入的“id”匹配，这将链接它们，以便人们有更大的点击目标，屏幕阅读器用户就会知道哪个标签属于哪个控件）。

然后样式化标签。

- Quentin

---

说明：for 属性必须与你的输入的 name 属性相同。这些应该重命名为 rdDate1 和 rdDate2，以便正常工作。 - Tim

@Tim — 不要！是 id 属性！如果你改变名称，那么单选按钮就不再是一组了！ - Quentin

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

还要考虑不使用内联样式，而是使用外部样式表。

- Tim B James