Hide validation icons from multiple selects

Implementation provided in #33411 does not take into account that some
Operating Systems may display a vertical scrollbar in the multiple
select field

This implementation will hide the validation icons from multiple select
fields, just like Bootstrap 4 does.

Fix: #33591

1 files changed, 6 insertions, 11 deletions

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 612f94d17..283462fd5 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -88,17 +88,12 @@
       border-color: $color;
 
       @if $enable-validation-icons {
-        padding-right: $form-select-feedback-icon-padding-end;
-        background-image: escape-svg($form-select-indicator), escape-svg($icon);
-        background-position: $form-select-bg-position, $form-select-feedback-icon-position;
-        background-size: $form-select-bg-size, $form-select-feedback-icon-size;
-
-        &[multiple],
-        &[size]:not([size="1"]) {
-          padding-right: $input-height-inner;
-          background-image: escape-svg($icon);
-          background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
-          background-size: $form-select-feedback-icon-size;
+        &:not([multiple]):not([size]),
+        &:not([multiple])[size="1"] {
+          padding-right: $form-select-feedback-icon-padding-end;
+          background-image: escape-svg($form-select-indicator), escape-svg($icon);
+          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }