Form validation invalid icon on select only half visible

[hrueger]

• Operating system and version: Windows 10
• Browser and version: Latest firefox
• A reduced test case: https://codepen.io/hrueger/pen/bGEYxxJ

The icon which is added to form-control elements with the class is-invalid, looks like this on select fields:

See https://codepen.io/hrueger/pen/bGEYxxJ

[hrueger]

I just noticed that the same issue applies for is-valid and the green tick icon.

[alecpl]

Confirmed in Firefox 77 and Chrome 83. No problem with .custom-select.

Looks like 5.0.0-alpha1 has a different issue with that, the arrow is not displayed at all, so it looks like an input element.

[bharatmakvana]

Hello @XhmikosR & @alecpl

I have already fixed this issues and also submit the merge request on this ticket #32289

Thanks!

[mdo]

This doesn't apply to v5 I believe because of our .form-select being a completely custom component, so removing that label. Still tbd on if we can fix this reliably for v4 though given the differences in rendering between browsers for the .form-select there (but not .custom-select).

[XhmikosR]

This should be fixed by #33206