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

Question

我为 UI 使用 Material.io 并创建一个复选框：

<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

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

Answer 1

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

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

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

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

.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 选项。

祝你好运，享受代码！

Answer 2

It has its own classes for background like if you inspect and see the structure of checkbox there is div on which .mdc-checkbox__background class is present you can simple change with !important to override default

.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;
}

Answer 3

您可以使用--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>

Answer 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);

Answer 5

对于 Google MDC 版本 11.0.0 您可以使用：

.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background {
  border-color: red;
}

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

How to change checkbox background color?

html

css

material-components-web