2

I use Material.io for my UI and create a check box:

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

Like this:

https://material-components.github.io/material-components-web-catalog/#/component/checkbox

How can I change checkbox background to other color for example red?

Edric
  • 24,639
  • 13
  • 81
  • 91
  • https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css – arielhad Feb 03 '20 at 08:45
  • 1
    I use matrial.io components –  Feb 03 '20 at 08:46
  • 1
    https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox#basic-usage You need to change the color of `
    `, you can do it via css
     – arielhad Feb 03 '20 at 08:50

6 Answers6

1

They use another element in order to style the checkbox.

The element is: <div class="mdc-checkbox__background">

And the selector is this: .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background

So all you need to do is to add this line on your style sheet:

.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
  border-color: red;
  background-color: red;
}

Hint: Use the dev tools on firefox or chrome. Right click on the element you want to check and then click on the inspect option.

Good luck and enjoy code!

A. Meshu
  • 4,053
  • 2
  • 20
  • 34
0

You can use --mdc-theme-secondary:#ff0000 to change your color:

<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>
0

If you're using SASS, you can use one of Material's Sass mixins (documentation found on the same page linked in the question, at the bottom):

@import '@material/checkbox/mixins';

@include mdc-checkbox-container-colors($marked-fill-color: red);
tgordon18
  • 1,562
  • 1
  • 19
  • 31
0

For Google MDC version 11.0.0 you can use:

.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background {
  border-color: red;
}
capo11
  • 790
  • 3
  • 11
  • 32
0
.mdc-checkbox__background {
    border-color: red !important;
}
StackOverflowUser
  • 945
  • 12
  • 10
-1

It has its own classes for background like if you inspect and see the structure of checkbox there is div on which .mdc-checkbox__background class is present you can simple change with !important to override default

.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;
}
Awais
  • 4,752
  • 4
  • 17
  • 40