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)?
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.com/edit/thtobchr?file=src%2Fexample%2Fcheckbox-overview-example.css