Skip to content

Commit 5a1a0ba

Browse files
authored
fix(material/select): ensure proper highlighting on selection (#31789)
1 parent f137183 commit 5a1a0ba

File tree

1 file changed

+4
-3
lines changed

1 file changed

+4
-3
lines changed

src/material/core/option/option.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,10 @@ $_side-padding: 16px;
4141
}
4242

4343
&.mdc-list-item--selected:not(.mdc-list-item--disabled) {
44-
// We don't change the background & text color in multiple mode since
45-
// it has the checkbox to show the selected state.
46-
&:not(.mat-mdc-option-multiple) {
44+
// Overide selected colors for non disabled list items except:
45+
// - when active, focused, or hovered so still indicates that state to the user.
46+
// - multiple mode since it already has the checkbox to show the selected state.
47+
&:not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) {
4748
background-color: token-utils.slot(option-selected-state-layer-color, $fallbacks);
4849
.mdc-list-item__primary-text {
4950
color: token-utils.slot(option-selected-state-label-text-color, $fallbacks);

0 commit comments

Comments
 (0)