1

如何使用基本 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>

4

1 回答 1

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

Web 的材质组件现在使用 css 变量mdc-theme-secondary而不是--mdc-theme-accent辅助颜色。

这在0.18.0版中已更改

于 2018-01-24T23:48:39.653 回答