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影响文本属性？

Answer 1

文字应在label之内。添加for属性以将其附加到复选框。

jsFiddle example - 它有效。

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

Answer 2

首先，正确标记文本。你有一个输入标签，使用标签元素。

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

然后，假设复选框的标签将始终紧跟标记中的复选框并使用相邻的兄弟组合器：

input[type="checkbox"] + label {

}

Answer 3

<input>标记没有结束标记 - 它是一个自动结束标记。所以它旁边的文字不是它的一部分。您需要将文本单独设置为自己的元素，例如<label>。

Answer 4

一个好主意是使用<span>标记：

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

Answer 5

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

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

然后你可以添加这样的CSS

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

Answer 6

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

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

Answer 7

文字需要在标签中。为复选框创建标签。我希望这有帮助

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

7 个答案: