如果选中，则更改复选框的颜色

Question

我正在尝试更改复选框的背景颜色和边框，但它不起作用。

HTML：

<label for="checkbox1" class="checkbox">
  <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox</span>
</label>

CSS：

.checkbox input:checked {
    border-color: red;
    background-color:red;
}

JSFiddle 演示

更新：

我无法更改标记

Answer 1

使用下面的选项

input[type="checkbox"]#checkbox1:checked + span {
      border-color: red;
    background-color:red;
}

Answer 2

您必须将复选框包裹在跨度中才能执行此操作。发现了与前任的小提琴。

<span class="bigcheck">
    <label class="bigcheck">Cheese
        <input type="checkbox" class="bigcheck" name="cheese" value="yes"/>
        <span class="bigcheck-target"></span>
    </label>
</span>

希望能帮助到你 ：）