blocks|key|4201710|text|我认为这是因为您设置的CSS应用于该输入的“内部”标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4201711|你想要样式化的东西是它的值，所以你需要把你的输入包装在一个占位符中，并样式化它。|4201712|例如：|4201713|<span+style="font-size:40px">
++++<input++type="radio"+name="a"+value="a">some+text
++++<input++type="radio"+name="a"+value="b">some+text
</span>|code-block|syntax|javascript|4201714|按照预期工作。|4201715|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I think that it's because the CSS you're setting applies to the 'inner' tag of that input.</p>

<p>The thing you want styled is its Value, so you need to wrap your input inside a placeholder and style that.</p>

<p>For example:</p>

<pre><code>&lt;span style="font-size:40px"&gt;
    &lt;input  type="radio" name="a" value="a"&gt;some text
    &lt;input  type="radio" name="a" value="b"&gt;some text
&lt;/span&gt;
</code></pre>

<p>Works as expected.</p>


blocks|key|382564|text|但是，在设计单选按钮样式方面，您可以做的并不多：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|382565|<input+type="radio"+name="radiogroup"+id="radio-1">
<label+for="radio-1">Radio+button+1</label>|code-block|syntax|javascript|382566|您可以设置标签的样式...|382567|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>There's not a lot you can do to style a radio button, however:</p>

<pre><code>&lt;input type="radio" name="radiogroup" id="radio-1"&gt;
&lt;label for="radio-1"&gt;Radio button 1&lt;/label&gt;
</code></pre>

<p>you can style the label...</p>


blocks|key|383855|text|最好的方法是在外部样式表中，或者在文档的顶部提供样式减速。如果可能的话，内联样式通常是你想要避免的，因为它会在以后的更改中变得混乱，并可能导致真正肮脏的特异性问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|383856|一个修复的示例：|383857|HTMl+(示例)|383858|<div+id="form">
++++<input+type="text"+name="name"+value="a"+/>
</div>+|code-block|syntax|javascript|383859|CSS+(示例)|383860|#form+input+{
+++font-size:+20px;+++
}|383861|希望这能有所帮助。|383862|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>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.  </p>

<p>An example of a fix:</p>

<p>HTMl (example)</p>

<pre><code>&lt;div id="form"&gt;
    &lt;input type="text" name="name" value="a" /&gt;
&lt;/div&gt; 
</code></pre>

<p>CSS (example)</p>

<pre><code>#form input {
   font-size: 20px;   
}
</code></pre>

<p>Hope this helps.</p>


blocks|key|382551|text|尝试以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|382552|<input+type="radio"+name="a"+value="a"><span+style="font-size:+50px;">some+text</span></input>|code-block|syntax|javascript|382553|如果您使用span\p标记对文本进行换行，您将能够对该标记的内部文本设置样式。|382554|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try the following:</p>

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

<p>If you wrap the text with a span\p tag you will be able to style the inner text of that tag.</p>


blocks|key|3916262|text|我知道这个问题已经有了公认的答案，但我觉得值得一提的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3916263|将标签标记与每个单选输入相关联(使用标签的for属性)或使用<label>标记包装每个单选输入可能更好。这让您的用户可以单击text来选择单选输入，而不必瞄准一个相当小的圆圈。|offset|length|style|CODE|BOLD|3916264|因此，您的标记如下所示：|3916265|<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>|code-block|syntax|javascript|3916266|无线输入按其名称分组为互斥的选择，组将共享这些选择。在标签的for属性中指定的值将与要选择的单选输入的id属性相匹配。因此，在上面的示例中，如果您单击文本"Something+1"，将选择id为radio1的无线输入。|3916267|然后，您可以根据自己的需要设置标签文本的样式。|3916268|这是关于你问题的第二部分，|3916269|：“第二，做这件事最好的方法是什么？”|3916270|entityMap^0|0|L|3|U|7|1Q|4|0|0|0|U|3|1F|2|2P|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]|$D|15|E|16|F|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|18|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1H|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1I|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Y|$]]

<p>I know this question already has an accepted answer, but I figure it's worth mentioning this:</p>

<p>It may be better to either associate a <code>&lt;label&gt;</code> tag with each radio input (using the <code>for</code> attribute of the label) or wrapping each radio input with a label tag. This lets your user click on the <strong>text</strong> to select the radio input instead of having to aim for a rather small circle.</p>

<p>So your markup looks like so:</p>

<pre><code>&lt;input type="radio" id="radio1" name="radios" value="something 1" /&gt; 
&lt;label for="radio1"&gt;Something 1&lt;/label&gt;

&lt;input type="radio" id="radio2" name="radios" value="something 2" /&gt; 
&lt;label for="radio2"&gt;Something 2&lt;/label&gt;

&lt;input type="radio" id="radio3" name="radios" value="something 3" /&gt; 
&lt;label for="radio3"&gt;Something 3&lt;/label&gt;
</code></pre>

<p>Radio inputs are grouped into mutually exclusive selections by their name, which the group will share. The value specified in the <code>for</code> attribute of the label will match the <code>id</code> attribute 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 <code>radio1</code> gets selected.</p>

<p>You can then style the text of the label to your heart's content.</p>

<p>This is in regards to the second part of your question, </p>

<blockquote>
  <p>"Secondly, what is the best way to do this then?"</p>
</blockquote>


blocks|key|2302377|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2302378|#input+{
++background-color:+black;
++color:+green;
++text-align:+center;
}|code-block|syntax|javascript|2302379|<input+id="input"+value="Value"+/>|2302380|2302381|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#input {
  background-color: black;
  color: green;
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="input" value="Value" /&gt;</code></pre>
</div>
</div>
</p>


<p>why can't one set a style like the font size in an input tag, e.g.</p>

<pre><code>&lt;input style="font-size:20px" type="radio" name="a" value="a"&gt;some text&lt;/input&gt; 
</code></pre>

<p>Shouldn't the font attributes apply?</p>

<p>Secondly, what is the best way to do this then?</p>

<p>Thanks</p>


setting styles in <input> tag

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

为什么不能在输入标签中设置一个像字体大小这样的样式呢？<input style="font-size:20px" type="radio" name="a" value="a">some text</input> 字体属性不应该应用吗？其次，那么最好的方法是什么呢？谢谢

问在<input>标签中设置样式
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在<input>标签中设置样式EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在<input>标签中设置样式
EN