Question

我希望输入类型为 已选中 。文字颜色为 RED 。

 <div class="checkbox"><label><input type="checkbox"> Sedan <span>(10)</span></label></div>
 <div class="checkbox"><label><input type="checkbox"> Sedan <span>(10)</span></label></div>

DEMO

Answer 1

像这样更改你的HTML： -

<div class="checkbox"><input type="checkbox"/> <label>Sedan <span>(10)</span></label></div>

然后在css中： -

input[type=checkbox]:checked + label {
color: red;  
}

Demo

Answer 2

尝试使用以下代码

但这可以在IE9 +浏览器中使用

<div class="checkbox">
<input type="checkbox"> 
<label>Sedan <span>(10)</span></label>
</div>

和css

input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}

Answer 3

这是一个有效的fiddle。

我做了什么：修复了你的css选择器和html标签标签。

将html更改为

<div class="checkbox">
    <input type="checkbox">
    <label> Sedan <span>(10)</span></label>
</div>
<div class="checkbox">
    <input type="checkbox">
    <label> Sedan <span>(10)</span></label>
</div>
<div class="checkbox">
    <input type="checkbox">
    <label> Sedan <span>(10)</span></label>
</div>
<div class="checkbox">
    <input type="checkbox">
    <label> Sedan <span>(10)</span></label>
</div>

和css到

input[type=checkbox]:checked + label{
    color:red;
}
input[type=checkbox]:checked + span{
    color:red;
}

如何使用checkBox更改文本颜色

3 个答案: