Change md-checkbox color

Question

So it looks I can change the background-color of an empty md-checkbox by doing :

md-checkbox .md-icon {
background: red;
}

But I can't manage to change the background of a checked md-checkbox . I tried to play with :checked , ::before , ::after ... But didn't succeed.

How should I proceed ?

Answer 1

You need to use theme class as well as md-checked class combination in order to define selector with higher specificity. For example:

md-checkbox .md-icon {
    background: red;
}
md-checkbox.md-default-theme.md-checked .md-icon {
    background: orange;
}

And of course, avoid using !important , this is a sign that something is wrong with your styles.

Answer 2

in new version added underscore ._md-icon:

md-checkbox.md-checked ._md-icon {
         background-color: white;
}