Always Show Arrows for Number Input
While I enjoy small details that make user interfaces more elegant, I also believe that less is more, especially when it comes to native behavior. One native behavior I dislike is that <input type="number" /> elements only show the increment and decrement arrows when the input is focused. It's a needless focus change -- just show those controls all the time.
So how do we show those controls when the input isn't focused? An easy bit of CSS:
/* ensures the increment/decrement arrows always display */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
I appreciate that the browser's native stylesheet doesn't use hidden tricks or privileged code -- it's all just CSS that we can override.
I'm always suspect when it comes to hover effects, as I feel hiding UI elements decreases accessibility no matter what the reason is.
![fetch API]()
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![Control Element Outline Position with outline-offset]()
I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...
It’s worth mentioning that these styles only apply on desktop. The buttons are not shown in Chrome on Android which is probably better that way since the buttons are so small.
We can improve it by not showing the arrows for elements with step=”any”, in which case the input arrows don’t do anything.
/* ensures the increment/decrement arrows always display as long as step is not 'any' */ input[type="number"]:not([step="any"])::-webkit-inner-spin-button, input[type="number"]:not([step="any"])::-webkit-outer-spin-button { opacity: 1; }