Refactor native select caret styles, fixes #571 and #572

[lindsaym-fa]

For styling a native <select>, the story goes:

• We can't use ::after on a <select>.
• We can't use ::after on a <label> containing the select because it won't appear for selects outside of a label.
• We can't use the technique of background-color + mask on a <select> to get the right shape and color of the caret since...well, the select itself will be masked.

So, in a live discussion of #571, we chose to use the browser's default caret rather than trying to replace it with our own. As it turns out...

We can't do that because each browser's default select styling creates inconsistencies, but most of all...Safari.

---

❌ Fail: Using the browser's default caret

Removing appearance: none to use the browser's default caret yielded these results:
Firefox (close!)

Chrome and Edge (they add space around the selected value that we can't seem to target)

Safari (straight-up doesn't care)

---

✅ Pass: Using background-image with background-blend-mode

So, I ended up taking the approach of keeping appearance: none and using a background-image with background-blend-mode.

The results are not exact, but they are passable. Here are some examples:
Default theme:

Awesome theme:

The worst offenders are selects in the Premium theme, where background-blend-mode is less effective because the theme sets --wa-form-control-background-color: transparent.

A filled select in dark mode is not especially great:

An outlined select in light mode is meh:

There may be a closer match, but I've exceeded the allotment of time I'd like to spend mixing and matching blend modes for now.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
webawesome	✅ Ready (Inspect)	Visit Preview	Jan 24, 2025 0:08am

[LeaVerou]

Wow, this is great! I'm so glad the blending mode idea actually panned out!! I hadn't considered including the icon twice, that's clever.