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.
![Introducing MooTools Templated]()
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:
new Element Madness
The first way to create UI-driven...
![Being a Dev Dad]()
I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...
![How to Create a Twitter Card]()
One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
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; }