@Aaron when I used to teach this stuff, I had two rules:
1. Is it accessible (AIM)?
2. Is it supported in all major browsers today?
The rest is experimentation at best and CCS complication at worst.
@cubeExplorer Yes, it’s accessible — as long as you don’t mess screw up the CSS — it’s a `select`.
It’s supported in Chromium and Safari Technical Preview with Firefox working on it too.
Checks both boxes, plus it’s a progressive enhancement that doesn’t sacrifice the experience in browsers that don’t support. And it’s way better than a JS-driven faux-select on pretty much every level.
I don’t wanna yuck your yum here but chrome only makes it a pass for me. I’m still cleaning up code for IE and that is an ick I regularly get to taste.
@llatan `appearance: base-select` is supported in Chromium (Chrome, Edge, Opera, Android WebView, etc.) and in TP for Safari: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/appearance#base-select
The only outlier is FF, but it’s in progress: https://bugzilla.mozilla.org/show_bug.cgi?id=1944403
Super-low risk for using it too… it degrades to a perfectly usable `select`.
The appearance CSS property specifies the rendered appearance of replaced UI widget elements such as form controls. Most commonly, such elements are given native, platform-specific styling based on the operating system's theme, or a primitive appearance with styles that can be overridden using CSS.
appreciate the details - I managed to skip by the original browser wars but inherited code that's just a graveyard of IE fixes, bodges and popper.js
Aaron Gustafson
Dave Everitt
it rhymes with satan