In Angular Material, there are 3 states for checkboxes: unselected, selected, and indeterminate.

When a checkbox is selected, a mat-mdc-checkbox-checked css class is applied.

I want to be able to add unique styling to only indeterminate checkboxes, but I can't find any classes that state when the checkbox is indeterminate. I'd like to not have to add my own class, because that will require me to update many templates throughout my app.

Is there any class that material adds to checkboxes when they are in an indeterminate state? Or any other way to know when it's indeterminate (in CSS)?

In Angular Material, there are 3 states for checkboxes: unselected, selected, and indeterminate.

When a checkbox is selected, a mat-mdc-checkbox-checked css class is applied.

I want to be able to add unique styling to only indeterminate checkboxes, but I can't find any classes that state when the checkbox is indeterminate. I'd like to not have to add my own class, because that will require me to update many templates throughout my app.

Is there any class that material adds to checkboxes when they are in an indeterminate state? Or any other way to know when it's indeterminate (in CSS)?

• css
• angular
• angular-material

• 1 The class used by material is mdc-checkbox__mixedmark, however it's present in every checkbox. As for today there isn't a way to achieve that without adding a custom touch. Assuming you're using a FormGroup, perhaps a custom directive would help you, or a custom validator. – Jacopo Sciampi Commented Feb 3 at 13:50
• @JacopoSciampi Thanks for looking and finding this class. It encouraged to comb through the DOM and I found out the input elements have an :indeterminate pseudo class applied to them. So I was able to use that with a :has() on the mat-checkbox to know if it's indeterminate or not. – ineedtoknow Commented Feb 3 at 21:52
• 1 Awesome! Glad to hear that and to be proven half wrong ! Gotta remember this as well – Jacopo Sciampi Commented Feb 5 at 8:15

1 Answer 1

I found it! I'm so happy. :)
I combed through the DOM looking for a way to distinguish indeterminate checkboxes from other types of checkboxes.
AND THEN I DISCOVERED THE :indeterminate PSEUDO-CLASS ON THE INPUT ELEMENT!
I can use it with the :has pseudo-class to ascertain when a material checkbox is in the indeterminate state with CSS! :)

Example, the below CSS targets indeterminate mat-checkboxes and applies a outline:

.mat-mdc-checkbox:has(.mdc-checkbox__native-control:indeterminate) {
    outline       : 3px solid hotpink !important;
    outline-offset: 2px !important;
}

Here's a stackblitz in case you want to see a demo: https://stackblitz/edit/thtobchr?file=src%2Fexample%2Fcheckbox-overview-example.css