当选中时更改复选框标签的颜色

我试图在选中时更改复选框标签的颜色。我之前在其他网站上做过这个，但由于某种原因，我的代码只是在这个上没有工作。我正在使用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; 
}

来源

2014-11-08 user2694306

您应该将.onlinecheckbox后input[type="checkbox"]：

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

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

来源

2014-11-08 20:54:40 nicael

@哈希非常感谢，没有注意到：D – nicael 2014-11-08 21:07:20

问题中的选择器是*有效*，它们只是不正确*（与它们意图匹配的元素不匹配）。 – 2014-11-08 22:35:07

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

尝试它的工作原理

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

来源

2014-11-08 20:49:40 kaxi1993

当选中时更改复选框标签的颜色

回答

相关问题