diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss index a36ee11e0b..050c60efc5 100644 --- a/packages/styles/src/components/form-select.scss +++ b/packages/styles/src/components/form-select.scss @@ -2,6 +2,7 @@ @use './../mixins/utilities'; @use './../functions/forms' as forms-fx; +@use './../mixins/forms' as forms-mx; @use './../functions/tokens'; @use './../tokens/components'; @use './../tokens/elements'; @@ -103,12 +104,16 @@ tokens.$default-map: components.$post-select; } } - @include utilities.high-contrast-mode-dark() { - background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#e0e0e0') !important; - } + &, + &:hover:not([multiple]), + &:focus { + @include utilities.high-contrast-mode-dark() { + background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#e0e0e0'); + } - @include utilities.high-contrast-mode-light() { - background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#333333') !important; + @include utilities.high-contrast-mode-light() { + background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#333333'); + } } } @@ -125,12 +130,16 @@ tokens.$default-map: components.$post-select; } } - @include utilities.high-contrast-mode-dark() { - background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#e0e0e0') !important; - } + &, + &:hover:not([multiple]), + &:focus { + @include utilities.high-contrast-mode-dark() { + background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#e0e0e0'); + } - @include utilities.high-contrast-mode-light() { - background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#333333') !important; + @include utilities.high-contrast-mode-light() { + background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#333333'); + } } } @@ -143,13 +152,7 @@ tokens.$default-map: components.$post-select; background-position: center right tokens.get('select-validation-icon-position-inline-end'); } - &.is-valid:not(:disabled) { - background-image: forms.$valid-icon; - } - - &.is-invalid:not(:disabled) { - background-image: forms.$invalid-icon; - } + @include forms-mx.validation-icons(); } } diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index a83ae5c367..e22b4d2d62 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -31,7 +31,7 @@ } } -// Used on form-input and form-textarea to set the correct colored validation icon +// Used on form elements to set the correct colored validation icon @mixin validation-icons() { &.is-valid:not(:disabled) { background-image: forms.$valid-icon;