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

Question

我将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

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

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

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

.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

你可以--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 3

如果您使用的是 SASS，则可以使用 Material 的 Sass mixin 之一（在问题链接的同一页面上找到的文档，位于底部）：

@import '@material/checkbox/mixins';

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

Answer 4

对于 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;
}

Answer 5

它有自己的背景类，例如，如果您检查并查看复选框的结构，则存在 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;
}