如何更改复选框背景颜色？答案

【问题标题】：How to change checkbox background color?如何更改复选框背景颜色？
【发布时间】：2020-05-19 00:00:22
【问题描述】：

我将Material.io 用于我的 UI 并创建一个复选框：

<div class="mdc-form-field">
  <div class="mdc-checkbox">
    <input type="checkbox"
           class="mdc-checkbox__native-control"
           id="checkbox-1"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark-path"
              fill="none"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
    <div class="mdc-checkbox__ripple"></div>
  </div>
  <label for="checkbox-1">Checkbox 1</label>
</div>

像这样：

https://material-components.github.io/material-components-web-catalog/#/component/checkbox

如何将复选框背景更改为其他颜色，例如红色？

【问题讨论】：

stackoverflow.com/questions/34388696/…
我使用matrial.io组件
github.com/material-components/material-components-web/tree/…你需要改变<div class="mdc-checkbox__background">的颜色，你可以通过css来完成

标签： html css material-components-web

【解决方案1】：

他们使用另一个元素来设置复选框的样式。

元素为：<div class="mdc-checkbox__background">

选择器是这样的： .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background

所以你需要做的就是在你的样式表中添加这一行：

.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
  border-color: red;
  background-color: red;
}

提示：使用 firefox 或 chrome 上的开发工具。右键单击要检查的元素，然后单击 inspect 选项。

祝你好运，享受代码！

【讨论】：

【解决方案2】：

你可以使用--mdc-theme-secondary:#ff0000来改变你的颜色：

<div class="mdc-form-field">
  <div class="mdc-checkbox" style="--mdc-theme-secondary:#ff0000">
    <input type="checkbox"
           class="mdc-checkbox__native-control"
           id="checkbox-1"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark-path"
              fill="none"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
    <div class="mdc-checkbox__ripple"></div>
  </div>
  <label for="checkbox-1">Checkbox 1</label>
</div>

【讨论】：

【解决方案3】：

它有自己的背景类，就像你检查并看到复选框的结构有 div .mdc-checkbox__background 类存在，您可以使用 !important 进行简单更改以覆盖默认值

.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
    border-color: red !important;
    background-color: red !important;
}

【讨论】：

其实你不需要 !important (:
@A.Meshu 同意，但在我的情况下，我使用内部组件样式，因此需要与 deep 选择器一起使用 :)

【解决方案4】：

如果您使用的是 SASS，则可以使用 Material 的 Sass mixin 之一（文档位于底部的 the same page linked in the question）：

@import '@material/checkbox/mixins';

@include mdc-checkbox-container-colors($marked-fill-color: red);

【讨论】：