'Select' Component style varies between chromium and firefox browsers

[TomGNorris]

What is the problem?

Viewing the select component in the design system shows different styling between firefox, safari and chromium browsers.

Firefox/Safari:

Chromium:

This is resulting in some styling on NHS services (e.g. Register with a GP) being customised/overridden to avoid the greyed out appearance which looks like the dropdown is disabled.

Bugs

Expectation: Styling of the dropdown to be consistent with a white background in the dropdown on all core browsers.

Reality: Styling of the dropdown appears differently between firefox/safari (where it appears with a grey #e4e4e8 background) and chromium based browsers e.g. Arc, Chrome, Edge (where it appears with a white background)

Reproducing the bug

• NHSUK frontend version:
• Node version:
• npm version:

Steps to reproduce it:

1. Open https://service-manual.nhs.uk/design-system/components/select with a chromium based browser and either firefox/safari
2. Observe the background colour of the dropdown in the specimen component card

Attachments

Firefox/Safari:

Chromium:

[anandamaryon1]

Thanks for raising this. It is happening because the select styling depends on the browser and OS, so it looks even more different on macOS in safari for example.

However, the fact that it looks like it is disabled when compared with our other form elements (eg. a text input) is an issue, and one that GOV.UK seem to have fixed a while back: https://github.com/alphagov/govuk-frontend/pull/2524

[frankieroberto]

I’m seeing a different variant again in Safari (version 17.4 on MacOS):