blocks|key|1064548|text|文本应该在label中。添加一个for属性将其附加到复选框中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1064549|jsFiddle+example+-它能工作。|1064550|<input+id="checkbox"+type="checkbox"/><label+for="checkbox">Click+me</label>|code-block|syntax|javascript|1064551|然后更改CSS：|1064552|label+{
++++color:green;
++++font-family:+Consolas,+Baskerville,+'Segoe+UI',+sans-serif;
}

input[type=checkbox]:hover+{
++++box-shadow:0px+0px+10px+#1300ff;
}|1064553|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/JoshC/a545M/^0|5|5|G|3|0|0|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>The text should be within a <code>label</code>. Add a <code>for</code> attribute to attach it to the checkbox too.</p>

<p><a href="http://jsfiddle.net/JoshC/a545M/" rel="nofollow"><strong>jsFiddle example</strong></a> - it works.</p>

<pre><code>&lt;input id="checkbox" type="checkbox"/&gt;&lt;label for="checkbox"&gt;Click me&lt;/label&gt;
</code></pre>

<p>Then change the CSS:</p>

<pre><code>label {
    color:green;
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}

input[type=checkbox]:hover {
    box-shadow:0px 0px 10px #1300ff;
}
</code></pre>


blocks|key|1097237|text|首先，正确标记课文。输入有一个标签，使用label元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1097238|<input+type=checkbox+id=myCheckbox>+<label+for=myCheckbox>+Click+moi!+</label>|code-block|syntax|javascript|1097239|然后，假设复选框的标签始终紧跟标记中的复选框，并使用相邻的同级组合器：|1097240|input[type="checkbox"]+%2B+label+{

}|1097241|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>First, mark up the text correctly. You have a label for the input, use a label element.</p>

<pre><code>&lt;input type=checkbox id=myCheckbox&gt; &lt;label for=myCheckbox&gt; Click moi! &lt;/label&gt;
</code></pre>

<p>Then, make the assumption that the label for a checkbox will always immediately follow that checkbox in the markup and use the adjacent sibling combinator:</p>

<pre><code>input[type="checkbox"] + label {

}
</code></pre>


blocks|key|547849|text|<input>标记没有结束标记--它是一个自结束标记。所以它旁边的文字不是它的一部分。您需要将文本单独地样式化为它自己的元素，比如<label>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|547850|entityMap^0|0|7|1T|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>The <code>&lt;input&gt;</code> tag does not have an end tag - it's a self-closing tag. So the text next to it is not part of it. You need to style the text separately as its own element, like a <code>&lt;label&gt;</code>, for instance.</p>


blocks|key|1097162|text|一个好主意是使用<span>标记：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1097163|<style>
++++#cb_span{color:green;}
</style>
<input+type="checkbox"><span+id="cb_span">Click+moi!</span>|code-block|syntax|javascript|1097164|entityMap^0|8|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>One good idea is to use a <code>&lt;span&gt;</code> tag:</p>

<pre><code>&lt;style&gt;
    #cb_span{color:green;}
&lt;/style&gt;
&lt;input type="checkbox"&gt;&lt;span id="cb_span"&gt;Click moi!&lt;/span&gt;
</code></pre>


blocks|key|1064519|text|此文本不是复选框的一部分。它是普通的浮动文本，它属于它的容器(也是复选框的容器)。如果您的chackbox+%2B+text对被包装在某个容器中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1064520|<div+id="container">
++++<input+type="checkbox">Click+moi!
</div>|code-block|syntax|javascript|1064521|然后您可以添加这样的CSS。|1064522|#container+{
++++color:green;
++++font-family:+Consolas,+Baskerville,+'Segoe+UI',+sans-serif;
}|1064523|entityMap^0|19|8|1K|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>This text is not the part of the checkbox. It's the normal floating text and it belongs to its container (which is also checkbox's container). If you have your <code>chackbox</code> + <code>text</code> pair wrapped in some container e.g.</p>

<pre><code>&lt;div id="container"&gt;
    &lt;input type="checkbox"&gt;Click moi!
&lt;/div&gt;
</code></pre>

<p>then you can add such CSS</p>

<pre class="lang-css prettyprint-override"><code>#container {
    color:green;
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}
</code></pre>


blocks|key|547935|text|文本本身并不是input元素的一部分。通过将文本放在HTML元素中并使用一些CSS技巧，我们可以像在包含的小提琴中那样更改文本：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|547936|http://jsfiddle.net/QRBEx/8/|547937|entityMap|0|LINK|mutability|MUTABLE|url^0|7|5|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>The text itself isn't part of the <code>input</code> element.
By instead placing the text in an HTML element and using a bit of CSS trickery, we can change the text like in the included fiddle:</p>

<p><a href="http://jsfiddle.net/QRBEx/8/" rel="nofollow">http://jsfiddle.net/QRBEx/8/</a></p>


blocks|key|1097269|text|文本需要在标签中。为复选框创建标签。我希望这能帮到你|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1097270|​|1097271|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>The text needs to be in  a label. create a label for the checkbox.
i hope this helps</p>

<p></p>


<p>With this input checkbox:</p>

<pre><code>&lt;input type="checkbox"&gt;Click moi!
</code></pre>

<p>...and this CSS:</p>

<pre><code>input[type=checkbox] {
    color:green;
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}

input[type=checkbox]:hover {
    box-shadow:0px 0px 10px #1300ff;
}
</code></pre>

<p>...the hover bit works fine (the checkbox itself changes), but the color / font of the text ("Click moi!") is not affected by setting color and font-family.</p>

<p>jsfiddle: <a href="http://jsfiddle.net/QRBEx/" rel="nofollow">http://jsfiddle.net/QRBEx/</a></p>

<p>How can I affect the text attributes via CSS?</p>


How can I style an HTML checkbox's text?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

使用此输入复选框：<input type="checkbox">Click moi!...and此CSS：input[type=checkbox] {    color:green;    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;}input[type=checkbox]:hover {    box-shadow:0p

问如何设置HTML复选框的文本样式？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置HTML复选框的文本样式？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置HTML复选框的文本样式？
EN