如何给HTML复选框的文本添加样式？

Question

使用此输入复选框：

<input type="checkbox">Click moi!

...以及这段CSS：

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

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

...悬停效果可以正常工作（复选框本身会改变），但文本的颜色/字体（“Click moi！”）不受设置颜色和字体族影响。

jsfiddle：http://jsfiddle.net/QRBEx/

我该如何通过CSS影响文本属性？

- B. Clay Shannon-B. Crow Raven

Answer 1

文本应该在标签里。 添加一个属性将其连接到复选框。

jsFiddle示例 -它有效。

<input id="checkbox" type="checkbox"/><label for="checkbox">Click me</label>

然后更改 CSS：

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

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

- Josh Crozier

Answer 2

首先，正确地标记文本。您需要为输入添加一个标签，使用label元素。

<input type=checkbox id=myCheckbox> <label for=myCheckbox> Click moi! </label>

接着，我们假设复选框的标签总是紧跟在该复选框的标记中，并使用相邻兄弟组合选择器：

input[type="checkbox"] + label {

}

- Quentin

Answer 3

一个好的想法是使用标签：

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

- cssyphus

Answer 4

这段文字不是复选框的一部分。它是正常的浮动文本，属于它的容器（也是复选框的容器）。如果您将checkbox + text对包装在某个容器中，例如：

<div id="container">
    <input type="checkbox">Click moi!
</div>

然后您可以添加这样的CSS。

#container {
    color:green;
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}

- matewka

Answer 5

<input>标签没有结束标签，它是一个自闭合标签。因此，紧随其后的文本不是它的一部分。您需要将文本单独样式化为自己的元素，例如<label>。

- Brian Stephens

Answer 6

文本本身不是input元素的一部分。 相反，通过将文本放置在HTML元素中并使用一些CSS技巧，我们可以像包含的fiddle中那样更改文本：

http://jsfiddle.net/QRBEx/8/

- Roberto

Answer 7

文本需要放在标签中。为复选框创建一个标签。 希望这可以帮助到您。

- Ben Offonime

---

这不是评论框。 - Mathews Sunny

这会有何帮助？已经有一份被接受的四年前的答案，不仅说明了同样的事情，还提供了相应的代码。你认为你贡献了什么？ - Robby Cornelissen