Question

为什么不能在输入标签中设置类似字体大小的样式，例如

<input style="font-size:20px" type="radio" name="a" value="a">some text</input>

字体属性不应该适用吗？

其次，那么最好的方法是什么？

由于

Answer 1

我认为这是因为您设置的CSS适用于该输入的“内部”标记。

你想要设置样式的是它的Value，所以你需要将你的输入包装在占位符和样式中。

例如：

<span style="font-size:40px">
    <input  type="radio" name="a" value="a">some text
    <input  type="radio" name="a" value="b">some text
</span>

按预期工作。

Answer 2

然而，对于单选按钮的样式，你可以做很多事情：

<input type="radio" name="radiogroup" id="radio-1">
<label for="radio-1">Radio button 1</label>

你可以设置标签的样式......

Answer 3

解决此问题的最佳方法是在外部样式表中提供样式减速，或者可能在文档的顶部。内联样式通常是您希望尽可能避免的，因为它会对以后的更改造成混淆，并且可能导致非常脏的特异性问题。

修复的一个例子：

HTMl（示例）

<div id="form">
    <input type="text" name="name" value="a" />
</div>

CSS（示例）

#form input {
   font-size: 20px;   
}

希望这有帮助。

Answer 4

尝试以下方法：

<input type="radio" name="a" value="a"><span style="font-size: 50px;">some text</span></input>

如果使用span \ p标记包装文本，则可以设置该标记的内部文本的样式。

Answer 5

我知道这个问题已经有了一个公认的答案，但我认为值得一提：

将<label>标记与每个无线电输入相关联（使用标签的for属性）或使用标签标记包装每个无线电输入可能更好。这样，您的用户就可以点击文字来选择广播输入，而不必瞄准相当小的圈子。

所以你的标记看起来像这样：

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

无线电输入按其名称分组为互斥选择，组将共享。标签的for属性中指定的值将与您要选择的无线电输入的id属性匹配。因此，在上面的示例中，如果单击文本“Something 1”，则会选择id为radio1的无线电输入。

然后，您可以将标签的文字设计为您心中的内容。

这是关于你问题的第二部分，

“其次，那么最好的方法是什么？”

Answer 6

#input {
  background-color: black;
  color: green;
  text-align: center;
}

<input id="input" value="Value" />

在<input />标签中设置样式

6 个答案: