Select elements show two carets in Forced Colors mode

i'm checking this issue.

i have checked this issues on Drupal 11.1.1
with the steps mention above. double checked it. but was not able to replicate this issue.

Steps for testing.

1. Download and enabled the gin theme and cleared the cache.
2. Enable the dark mode and activated the focus colors mode
3. tried giving it the different colors
4. Checked on the contnet type page as well.

Attaching the screenshot for reference.

Moving this to Needs Review.
After the verification can be moved to RTBC.

I am working on it.

Make the suggested changes :)

Before:

After:

Amazing. Thanks for quickly replicating this @sandip poddar.

There are a lot of other resources here if needed https://www.drupal.org/project/drupal/issues/3413207 📌 META: Provide better support for color and contrast media queries Active

@mgifford, Thanks for sharing the resource 😄

hello @sandip poddar , I have checked your MR on drupal 11.
Gin Admin Theme version 4.0.x.

The changes are working as expected and now a single caret icon is seen in the focus color dropdown.

Added before and after screenshots for reference.

Fixed some twerk as double carets were only appearing in dark mode so used unnecessary !important :( I had initially missed this, but now everything is looking good :)

Hi,
Applied the MR!579 on drupal 11.1.1 and it is working as expected.

Testing Steps:
1. Download and enabled the gin theme and cleared the cache.
2. Enable the dark mode and activated the forced color mode
3. Observe the changes there.

Testing Result:
After applying the patch, the Select elements aren't showing two carets in Forced Colors mode. Attached screenshot for reference.

Observation to review once:
@sandip poddar But here I observe one thing that Caret Icon in the field is more right aligned and there is very less space between Icon and Field Border. As per my opinion the spacing should be more, same like normal mode(without forced colored mode enabled). Attached screenshot for reference.

Status - Needs Review

I am looking into it.

Hi @rkoller, @saschaeggi,

I am currently facing an issue where the second caret in the <select> element is coming from the browser’s default styling. When enabling forced color mode, the default arrow appears due to appearance: revert.

If I remove the background image, the browser’s default arrow remains, but the challenge is that it is positioned too far to the right, and we cannot style it. On the other hand, if I use appearance: none, the default arrow disappears, and we must rely on a background image, which we can style.

However, with prefers-color-scheme: dark and forced-color-mode: active, the background image needs to be dark, while for prefers-color-scheme: light with forced-color-mode: active, it should be white in colour.

Could you please advise on the best approach:

1. Keeping the browser’s default arrow and removing the background image, or
2. Removing the default arrow and using a background image that adapts based on prefers-color-scheme?

Looking forward to your suggestions.