Fix validation feedback icon in select multiple

[tagliala]

Hi! 👋🏼👋🏼👋🏼

It has been a long time I do not contribute to Bootstrap. I've searched for "select validation feedback" but I didn't find open issues or other PRs, so apologies if it is a duplicate or if the behavior is intended

Validation feedback for <select multiple> should look like
<textarea>.

The previous implementation was placing the validation icon in the
middle of the select field together with the single select arrow, that
is not supposed to be part of this kind of inputs.

How to replicate

1. Go to https://getbootstrap.com/docs/5.0/forms/select/#sizing
2. Add is-invalid or is-valid class to one of the <select multiple> or <select size="n>1"> inputs

What did you get

What did you expect (this PR)

[mdo]

LGTM, thoughts @ffoodd?

[ffoodd]

Late to the party, sorry. I guess we could have wrap the previous declaration in a &:not(...) selector, but I'm not sure it'd be simpler.

I'll try to have a look later but it fixes the issue👌

[tkrotoff]

This PR is not OK.

Screenshots for form-select

• Chrome 89 desktop/Ubuntu

• Chrome 88 desktop/Windows 10

• Firefox 87 desktop/Windows 10

• Chrome 89 desktop/macOS

• Old Edge 17/42 Windows 10

The solution in Bootstrap 4 was to not display the feedback icon with custom-select (screenshot from Chrome 89 desktop/Ubuntu):

[tagliala]

Hi, thanks for the report

I can replicate this issue also in BS4 4.6

Demo: https://jsfiddle.net/tagliala/L527xnrj/

I'm open to both fixes (remove the validation icon AND provide more space to take scrollbar into account)

[tkrotoff]

I can replicate this issue also in BS4 4.6

This is because you don't use custom-select

[tagliala]

Ok, got it

this happens because

.form-select[multiple], .form-select[size]:not([size="1"]) {
    background-image: none;
}

in BS5 has less priority. I should investigate more

[tkrotoff]

provide more space to take scrollbar into account

Each browser and platform potentially has a different scrollbar with a different width.

Example with Firefox Ubuntu when you have a lot of options inside the select:

when you hover the scrollbar:

Chrome 89 mobile device (dev tools):

What about removing the scrollbar? Then you cannot scroll anymore :-) http://jsfiddle.net/zc4omj6q/1/ (from https://stackoverflow.com/a/11433927).

I think the least worst is to remove the feedback icon with select multiple. We still have the border color to give feedback to the user.