How do I set a custom color on a checkbox element in MDC-Web using basic CSS/HTML/JavaScript?
Example: How to make this checkbox background lightblue?
<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>:root {
--mdc-theme-primary: blue;
--mdc-theme-secondary: lightblue;
}
Material Components for the Web now uses the css variable mdc-theme-secondary rather than --mdc-theme-accent for secondary colours.
This was changed in version 0.18.0