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

Question

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

3

我正在尝试在选中复选框时更改其标签的颜色。我以前在其他网站上做过这个，但出于某种原因，我的代码在这个网站上不起作用。我正在使用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;
}

- user2694306

2个回答

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>

- kaxi1993

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nicael · Accepted Answer

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

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

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