2014-11-08 126 views
2

我試圖在選中時更改複選框標籤的顏色。我之前在其他網站上做過這個,但由於某種原因,我的代碼只是在這個上沒有工作。我正在使用Drupal 7和bootstrap 3+。當選中時更改複選框標籤的顏色

我的複選框看起來像這樣:

<div class="checkbox"> 
    <input class="onlinecheckbox" type="checkbox" name="dealtype[]" id="prov1" onchange="this.form.submit()" value="booking" checked=""> 
    <label for="prov1">Booking</label> 
</div> 

我的CSS如下:

.onlinecheckbox input[type="checkbox"] + label { 
    color: #ffffff; 
} 

.onlinecheckbox input[type="checkbox"]:checked + label { 
    color: #428bca; 
} 

回答

5

您應該將.onlinecheckboxinput[type="checkbox"]

input[type="checkbox"].onlinecheckbox + label { 
    color: #ffffff; 
} 

input[type="checkbox"].onlinecheckbox:checked + label { 
    color: #428bca; 
} 
+1

@哈希非常感謝,沒有注意到:D – nicael 2014-11-08 21:07:20

+0

問題中的選擇器是*有效*,它們只是不正確*(與它們意圖匹配的元素不匹配)。 – 2014-11-08 22:35:07

+0

@ JukkaK.K好的:) – nicael 2014-11-08 22:36:28

0

嘗試它的工作原理

<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://dygraphs.com/dygraph-dev.js"></script> 
<style> 
input[type="checkbox"] +label { 
    color: #ffffff; 
} 

input[type="checkbox"]:checked+label { 
    color: #428bca; 
} 
</style> 
</head> 
<body> 
<div class="checkbox"> 
    <input class="onlinecheckbox" type="checkbox" name="dealtype[]" id="prov1" onchange="this.form.submit()" value="booking" checked=""> 
    <label for="prov1">Booking</label> 
</div> 
<script> 

</script> 
</body> 
</html> 
相關問題