Question

我有三个带有三个复选框的div块，当我单击每个复选框时，我想更改div块的背景色。

当我尝试这样做时：

<style type="text/css">

.calendar-content {
    float: left;
    width: 100%;
    min-height: 112px;
    border: 1px solid #ccc;
    position: relative;
    display: block;
    margin-top: -1px;
}

.checkbox input[type="checkbox"] {
    margin-top: 1px;
    width: 20px;
    height: 20px;
    margin-left: -24px;
    padding-left: 24px;
}


.checkbox:checked ~ .calendar-content {
  background: #CCC;
}
</style>



<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

当我单击每个复选框时，它不会更改每个div块的颜色。我不知道为什么它不能让我更改div块的颜色，所以我猜我的代码有问题。

Jsfiddle：http://jsfiddle.net/sx5p4j3k/

请问给我一个例子，当我单击每个复选框时，如何使用css更改div块的颜色？

谢谢。

更改复选框选择的div颜色

0 个答案: