Form Control input type="search" 'x' (clear input) button

[coliff]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

The browser's built-in 'x' (clear input) button on input type="search" (in light mode) is a blue color in Chrome/Edge which doesn't quite match the look of Bootstrap - and likely many sites that use it. I suggest making a small CSS change to improve the look of it with this:

input[type='search']::-webkit-search-cancel-button {
  filter: grayscale(1);
}

Demo:
https://stackblitz.com/edit/form-control-search-clear-gray-btn?file=index.html

Motivation and context

With this change the clear input button will appear in gray which looks more like it's part of Bootstrap and I think a more neutral, natural color. Around the web it seems that gray is the most common color for a clear input x icon.

In dark mode the close button would be unchanged (it appears in white both with and without the above CSS).

I've tested this in both Edge 118 and Chrome 118. Note that Safari and Firefox already use gray for the close button.

[tattypedro]

OLA!

[julien-deramond]

Closing as done in #41639 :)