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 ?

Lilybel

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.

Mclellan

Thanks, is there also a way to change the 'checking icon' color inside the box to make it suit the new color better ? – Lilybel

Try this rule: md-checkbox.md-default-theme.md-checked .md-icon:after { border-color: green; }. Or more generic: md-checkbox.md-default-theme.md-checked .md-icon:after, md-checkbox.md-default-theme:not([disabled]).md-checked .md-icon:after { border-color: green; }. – Mclellan

Answer 2

in new version added underscore ._md-icon:

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

Protean

Good. Can you share me the link where they have mentioned about the changes? – Analcite

Hi unfortunately,I have found this solution by myself after looking in there css files . – Protean