Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit e96fe2f

Browse files
authored
fix(select): Disable ripple/state pseudos for native multiselect (#1781)
1 parent c08b5e1 commit e96fe2f

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

packages/mdc-select/mdc-select.scss

+10
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,16 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
353353
&:last-child {
354354
margin-bottom: 8px;
355355
}
356+
357+
// Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the
358+
// OS-determined selection color, which states styles are not going to play well with.
359+
// Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements
360+
// that we use for ripple/states to position and size themselves relative to the entire body instead.
361+
// Disabling states-specific styles on multi-select options altogether is the most straightforward recourse.
362+
&::before,
363+
&::after {
364+
content: none;
365+
}
356366
}
357367
// stylelint-enable plugin/selector-bem-pattern
358368

0 commit comments

Comments
 (0)