Inconsistent styling of select elements between browsers #99
Description
Describe the bug
<select> elements have different styling in each browser. In Chrome they have a white background, in Firefox they have a gray background, and they use system styling in Safari.
To Reproduce
View the Form page in the storybook in each browser.
Expected behavior
The styling should match between browsers.
Screenshots
Firefox:
Chrome:
Safari:
Desktop (please complete the following information):
- OS: Windows 10 21H2, MacOS 13.1
- Browser: Firefox, Chrome, Safari
- Version Firefox 108/109, Chrome 109, Safari 16.2
Smartphone (please complete the following information):
- Device: iPhone 12 pro, iPad Pro 2022
- OS: iOS 16.2, iPadOS 16.2
- Browser Safari
Additional context
Safari appears to need appearance: none, but that also removes the drop arrow.
I haven't tested this on Android.