Ellone Ellone - 6 months ago 258
AngularJS Question

Change md-checkbox color

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

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.