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

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

更新：

我无法更改标记。

- user4756836

---

复选框没有background-color属性。我建议阅读有关自定义复选框的内容，因为改变它们的外观涉及到更多的工作。 - Tyler Roper

有趣的阅读： https://dev59.com/Dm855IYBdhLWcg3wyniC - ne1410s

创建您自己的复选框像这样。 - skobaljic

Answer 1

请使用以下选项。

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

- Naga Sai A

---

改变文本颜色的代码 - user4756836

Answer 2

你需要将复选框包裹在 span 标签中才能实现此功能。 在这个示例中找到了相关代码。

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

希望这能帮助你：)

- theLearner