如果选中则更改复选框的颜色[重复]

Posted 2023-02-21

【中文标题】如果选中则更改复选框的颜色[重复]

【英文标题】：Changing the color of checkbox if checked [duplicate]

【发布时间】：2017-01-08 07:09:19

【问题描述】：

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

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 Demo

更新：

我无法更改标记

【问题讨论】：

复选框没有background-color 属性。我建议阅读自定义复选框，因为不幸的是，更改它们的外观涉及更多内容。

有趣的阅读：***.com/questions/4148499/…

创建您自己的复选框like this。

【参考方案1】：

使用下面的选项

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

【讨论】：

改变文本颜色

【参考方案2】：

您必须将复选框包装在一个跨度中才能执行此操作。 找到了Fiddle with Ex.

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

希望对你有帮助:)