Html 在 <input> 标签中设置样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7297077/
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
setting styles in <input> tag
提问by Ray
why can't one set a style like the font size in an input tag, e.g.
为什么不能在输入标签中设置像字体大小这样的样式，例如
<input style="font-size:20px" type="radio" name="a" value="a">some text</input>
Shouldn't the font attributes apply?
字体属性不应该适用吗？
Secondly, what is the best way to do this then?
其次，什么是最好的方法呢？
Thanks
谢谢
回答by Russ Clarke
I think that it's because the CSS you're setting applies to the 'inner' tag of that input.
我认为这是因为您设置的 CSS 适用于该输入的“内部”标签。
The thing you want styled is its Value, so you need to wrap your input inside a placeholder and style that.
您想要设置样式的是它的值，因此您需要将输入包装在占位符中并为其设置样式。
For example:
例如：
<span style="font-size:40px">
<input type="radio" name="a" value="a">some text
<input type="radio" name="a" value="b">some text
</span>
Works as expected.
按预期工作。
回答by Chains
There's not a lot you can do to style a radio button, however:
但是，您可以做很多事情来设置单选按钮的样式：
<input type="radio" name="radiogroup" id="radio-1">
<label for="radio-1">Radio button 1</label>
you can style the label...
您可以设置标签样式...
回答by GoGoGarrett
The best way to go about this is providing the style deceleration within an external stylesheet, or perhaps at the top of the document. Inline styles are typically what you want to avoid if at all possible, as it becomes confusing for later changes and can cause really dirty specificity issues.
解决此问题的最佳方法是在外部样式表中或在文档顶部提供样式减速。如果可能的话，内联样式通常是您想要避免的，因为它会使以后的更改变得混乱，并可能导致非常肮脏的特异性问题。
An example of a fix:
修复示例：
HTMl (example)
HTML（示例）
<div id="form">
<input type="text" name="name" value="a" />
</div>
CSS (example)
CSS（示例）
#form input {
font-size: 20px;
}
Hope this helps.
希望这可以帮助。
回答by Tieson T.
I know this question already has an accepted answer, but I figure it's worth mentioning this:
我知道这个问题已经有一个公认的答案，但我认为值得一提的是：
It may be better to either associate a <label>tag with each radio input (using the forattribute of the label) or wrapping each radio input with a label tag. This lets your user click on the textto select the radio input instead of having to aim for a rather small circle.
将<label>标签与每个无线电输入关联（使用for标签的属性）或用标签标签包装每个无线电输入可能会更好。这让您的用户可以单击文本来选择无线电输入，而不必瞄准一个相当小的圆圈。
So your markup looks like so:
所以你的标记看起来像这样：
<input type="radio" id="radio1" name="radios" value="something 1" />
<label for="radio1">Something 1</label>
<input type="radio" id="radio2" name="radios" value="something 2" />
<label for="radio2">Something 2</label>
<input type="radio" id="radio3" name="radios" value="something 3" />
<label for="radio3">Something 3</label>
Radio inputs are grouped into mutually exclusive selections by their name, which the group will share. The value specified in the forattribute of the label will match the idattribute of the radio input you want selected. So in the sample above, if you click on the text "Something 1", the radio input that is id'd as radio1gets selected.
无线电输入按名称分组为互斥的选择，该组将共享这些选择。for标签属性中指定的值将与id您要选择的无线电输入的属性匹配。因此，在上面的示例中，如果您单击文本“Something 1”，则会radio1选择id'd 的单选输入。
You can then style the text of the label to your heart's content.
然后，您可以根据自己的喜好设置标签文本的样式。
This is in regards to the second part of your question,
这是关于你问题的第二部分，
"Secondly, what is the best way to do this then?"
“其次，这样做的最佳方法是什么？”
回答by Bassem
Try the following:
请尝试以下操作：
<input type="radio" name="a" value="a"><span style="font-size: 50px;">some text</span></input>
If you wrap the text with a span\p tag you will be able to style the inner text of that tag.
如果您用 span\p 标签包裹文本，您将能够为该标签的内部文本设置样式。
