new native CSS form styling for menu number inputs #233
Description
Our current menus use the native implementation of <input type="number"> which is... crap. The tiny arrow buttons stacked on top of one another have always been a horrible experience. I've played with the -webkit styling stuff to make the arrow a bit bigger but it's still bad and doesn't work in Firefox.
So as soon as available it would be nice to take advantage of the new shinny native CSS styling.
testing:
https://codepen.io/jsnkuhn/pen/myVmRWY
spec is here:
https://drafts.csswg.org/css-forms-1/#number-pseudos
Google just put out an intent to prototype the newly spec-ed native CSS form controls:
https://groups.google.com/a/chromium.org/g/blink-dev/c/n1NsO0N_tO4/m/ruZbb1qsAgAJ
Safari has been working on the spec for this so probably has a test implementation already. It's likely just not public yet.
No idea about Firefox yet but web devs have been asking for better native for styling forever so can't imagine they'll sit on it for long.