Select elements have grey background in Firefox

Description of the issue

In the latest Firefox release (94.0.1), select elements have a grey background by default. This makes them look disabled:

This also affects the main GOV.UK site:

I think strictly this is a Firefox issue, but from https://bugzilla.mozilla.org/show_bug.cgi?id=1715064 it sounds like they consider it an expected change.

There was a similar issue with Ubuntu a couple of years ago (https://github.com/alphagov/govuk-frontend/issues/1659). The issue was closed off because setting a background colour on select caused issues in Firefox if the user has changed their browser default colours, but that issue now appears to be fixed

Steps to reproduce the issue

1. Download the latest Firefox release
2. Visit https://design-system.service.gov.uk/components/select/

Actual vs expected behaviour

I would expect the background of the select to match the background colour of the page

Environment (where applicable)

• Operating system: Windows 10 and macOS
• Browser: Firefox
• Browser version: 94.0.1
• GOV.UK Frontend Version: 3.14.0

[vanitabarrett]

Thanks @matteason and @danacotoran for raising these issues - we’ve implemented a fix which should be released in the next version of GOV.UK Frontend. I’m also going to write up a ticket to report the issue in Safari, as it applies to the default select dropdown (i.e: it’s not specific to the GOV.UK Frontend select).

[vanitabarrett]

A bit of testing to confirm when this was introduced:

Windows 10, Firefox 94: Grey background Windows 10, Firefox 95 (beta): Grey background Windows 10, Firefox 93: White background

Mac, Firefox 94: Grey background Mac, Firefox 95 (beta): Grey background Mac, Firefox 93: White background