如何使用checkBox是Checked change textcolor

我想要输入类型是Checked。 Text Color is RED。
如何使用checkBox是Checked change textcolor

<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

来源

2014-07-21 theinlwin

'我想pureCss不使用jQuery和javascript.'那你为什么标记与jQuery这个问题..？：0 –

http://jsfiddle.net/6Qa39/11/ –

更新我的问题.. – theinlwin

更改您的HTML这样的： -

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

，然后在CSS： -

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

Demo

来源

2014-07-21 08:13:57

嘿朋友。你的回答很好，但checkBox是在我想要的标签内。请问 – theinlwin

！你看到我的小提琴。 – theinlwin

@theinlwin嗨你不能通过CSS来做到这一点，你必须改变HTML，或者你可以使用jquery instread。 –

尝试使用下面的代码

但是，这将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; 
}

来源

2014-07-21 08:14:21 user3820621

嘿朋友。我想在标签内 – theinlwin

在这里工作是一个工作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; 
}

来源

2014-07-21 08:14:42 Alexandros

如何使用checkBox是Checked change textcolor

回答

相关问题