diff --git a/src/lib/autocomplete/_autocomplete-theme.scss b/src/lib/autocomplete/_autocomplete-theme.scss
index 7daf6f3b81fc..0572a6600ed5 100644
--- a/src/lib/autocomplete/_autocomplete-theme.scss
+++ b/src/lib/autocomplete/_autocomplete-theme.scss
@@ -8,14 +8,15 @@
background: mat-color($background, card);
color: mat-color($foreground, text);
- .mat-option {
- // Selected options in autocompletes should not be gray, but we
- // only want to override the background for selected options if
- // they are *not* in hover or focus state. This change has to be
- // made here because base option styles are shared between the
- // autocomplete and the select.
- &.mat-selected:not(.mat-active):not(:hover) {
- background: mat-color($background, card);
+ // Selected options in autocompletes should not be gray, but we
+ // only want to override the background for selected options if
+ // they are *not* in hover or focus state. This change has to be
+ // made here because base option styles are shared between the
+ // autocomplete and the select.
+ .mat-option.mat-selected:not(.mat-active):not(:hover) {
+ background: mat-color($background, card);
+
+ &:not(.mat-option-disabled) {
color: mat-color($foreground, text);
}
}
diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss
index 6a2a0fdb2587..0c423048b005 100644
--- a/src/lib/core/option/_option-theme.scss
+++ b/src/lib/core/option/_option-theme.scss
@@ -12,24 +12,25 @@
.mat-option {
color: mat-color($foreground, text);
- &:hover:not(.mat-option-disabled), &:focus:not(.mat-option-disabled) {
+ &:hover:not(.mat-option-disabled),
+ &:focus:not(.mat-option-disabled) {
background: mat-color($background, hover);
}
- .mat-primary &.mat-selected {
+ .mat-primary &.mat-selected:not(.mat-option-disabled) {
color: mat-color($primary);
}
- .mat-accent &.mat-selected {
+ .mat-accent &.mat-selected:not(.mat-option-disabled) {
color: mat-color($accent);
}
- .mat-warn &.mat-selected {
+ .mat-warn &.mat-selected:not(.mat-option-disabled) {
color: mat-color($warn);
}
// In multiple mode there is a checkbox to show that the option is selected.
- &.mat-selected:not(.mat-option-multiple) {
+ &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
background: mat-color($background, hover);
}
diff --git a/src/lib/core/option/option.html b/src/lib/core/option/option.html
index 4ed75942756d..9b5b23e354b2 100644
--- a/src/lib/core/option/option.html
+++ b/src/lib/core/option/option.html
@@ -1,8 +1,8 @@
+ [state]="selected ? 'checked' : ''" [disabled]="disabled">
+ [state]="selected ? 'checked' : ''" [disabled]="disabled">