No search 'cancel button' styles in Firefox due to them being a non-standard CSS feature

[AshGDS]

What

• Most browsers have a cancel button on any input type=search element, which allows the user to clear any text they have entered.
• This can be styled via a CSS psuedo element called ::-webkit-search-cancel-button
• I recently merged in a change requested by a designer to use our own cancel button styles. This was mainly because the default cancel button provided by browsers did not scale nicely when the page was zoomed in. See Use custom SVG for search 'cancel' icon #3673
• Firefox does not support this psuedo element as it is a non standard feature https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button - so Firefox has no cancel buttons at all, regardless of our custom styles.
• When I asked on Slack wether we should go ahead with this change I was instructed by our Lead FE to raise this issue so that we can monitor this inconsistency, in case a search cancel button is added to Firefox in the future or the implementation in other browsers changes. https://gds.slack.com/archives/CAD0JFQ12/p1697712777367839

Example on Chrome (cancel button available)

Example on Firefox (cancel button unavailable)