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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6137424/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:46:54  来源:igfitidea点击:

changing the font size of radio button text

html

提问by user517406

I am trying to change the font-size of some radio buttons :

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

<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

But adding style="font-size:11px;" to the input tag does not change the text size. The only way I have found to do this is to wrap the text in a font tag, but then you are limited to a font size of 1 to 7, none of which is the right size for what I require.

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

Does anybody know how to change the font size of a radio button text?

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

回答by Quentin

The text is besidethe radio button, not inside it.

文本单选按钮旁边,而不是在里面。

First, add a <label>element (make sure the forattribute matches the idof the input with which it is associated, this will link them so people will have a bigger click target and screen reader users will know which label belongs with which control).

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

Then style the label.

然后设置标签样式

回答by Tim B James

Wrap the text with a <label>tag and then you can style up this tag.

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

Also consider NOT using inline styles and use an external stylesheet.

还要考虑不使用内联样式并使用外部样式表。