I've incorporated Bootstrap into my website and noticed that the <select>
elements look strange without any extra styling. I'm particularly concerned about the appearance of their arrows.
Here's how a <select>
element styled with Bootstrap 4 appears in Firefox (with similar results in Chrome):
https://i.sstatic.net/voDDQ.png
In contrast, this is how Firefox displays a standard <select>
element without Bootstrap:
https://i.sstatic.net/n5xS5.png
It seems like the input-group styling in Bootstrap affects the appearance of these select elements, as demonstrated in this fiddle.
What is causing this issue and is there a way to restore the default appearance?