Question

如何使用基本的CSS / HTML / JavaScript在MDC-Web中的复选框元素上设置自定义颜色？

示例：如何使此复选框背景为浅蓝色？

<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <style>
        :root {
            --mdc-theme-primary: blue;
            --mdc-theme-accent: lightblue;
        }
        .mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::before,
        .mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::after {
            background-color: rgba(66, 66, 66, 0.08);
        }        
    </style>
</head>

<body>
<div class="mdc-form-field">
  <div class="mdc-checkbox">
    <input type="checkbox"
           id="my-checkbox"
           class="mdc-checkbox__native-control"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark__path"
              fill="none"
              stroke="white"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
  </div>

  <label for="my-checkbox">My Checkbox Label</label>
</div>
</body>

Answer 1

:root {
    --mdc-theme-primary: blue;
    --mdc-theme-secondary: lightblue;
}

Web的材质组件现在使用css变量mdc-theme-secondary而不是--mdc-theme-accent作为二次色。

版本0.18.0

中的内容已更改

MDC-Web：Checkbox的主题颜色

1 个答案: