Question

无法弄清楚如何更改未选中框的边框颜色，以及如何删除禁用的复选框周围的选择圆/动画/悬停。

PS mdc-checkbox__mixedmark的用途是什么？

<!doctype html>
<html>
  <head>
    <title>Randonneurs</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"/>
    <meta name="mobile-web-app-capable" content="yes">
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module">
      import {html, render} from 'https://unpkg.com/lit-html?module'
      import {MDCCheckbox} from 'https://unpkg.com/@material/checkbox?module'
      class HelloWorld extends HTMLElement {
        constructor() {
          super()
          this.attachShadow({mode: 'open'});
        }
        connectedCallback() {
          const root = this.shadowRoot
          render(html`
            <link href="https://unpkg.com/material-components-web/dist/material-components-web.min.css" rel="stylesheet">
            <style>
              :host {
                --mdc-theme-primary: #3f51b5;
                --mdc-theme-secondary: #3f51b5;
                --mdc-theme-accent: #3f51b5;
              }
            </style>
            <div class="mdc-checkbox">
              <input type="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" d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg>
                <div class="mdc-checkbox__mixedmark"></div>
              </div>
            </div>
            <div class="mdc-checkbox">
              <input type="checkbox" class="mdc-checkbox__native-control" disabled>
              <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>
          `, root)
          const linkEl = root.querySelector('link[rel="stylesheet"]')
          linkEl.addEventListener('load', () => {
            // root.querySelectorAll('.mdc-checkbox').forEach((i)=>MDCCheckbox.attachTo(i))
          })
        }
      }
      customElements.define('hello-world', HelloWorld)
    </script>
  </head>
  <body>
    <hello-world></hello-world>
  </body>
</html>

MDC-Web：复选框未选中的边框颜色

0 个答案: