Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent styling of select elements between browsers #99

Open
NeilBrommer opened this issue Jan 17, 2023 · 0 comments
Open

Inconsistent styling of select elements between browsers #99

NeilBrommer opened this issue Jan 17, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@NeilBrommer
Copy link

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:
Screenshot 2023-01-17 at 12-59-48 Components _ Content _ Form - Default Form ⋅ Storybook

Chrome:
storybook web wsu edu_index html_path=_story_components-content-form--default-form

Safari:
Image 1-17-23 at 1 19 PM

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.

@NeilBrommer NeilBrommer added the bug Something isn't working label Jan 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant