Skip to content

Commit

Permalink
fix(select): Disable ripple/state pseudos for native multiselect (#1781)
Browse files Browse the repository at this point in the history
  • Loading branch information
kfranqueiro committed Dec 15, 2017
1 parent c08b5e1 commit e96fe2f
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/mdc-select/mdc-select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,16 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
&:last-child {
margin-bottom: 8px;
}

// Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the
// OS-determined selection color, which states styles are not going to play well with.
// Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements
// that we use for ripple/states to position and size themselves relative to the entire body instead.
// Disabling states-specific styles on multi-select options altogether is the most straightforward recourse.
&::before,
&::after {
content: none;
}
}
// stylelint-enable plugin/selector-bem-pattern

Expand Down

0 comments on commit e96fe2f

Please sign in to comment.