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.
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Create a Spinning, Zooming Effect with CSS3]()
In case you weren't aware, CSS animations are awesome. They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint. One of my favorite effects...
![Highlighter: A MooTools Search & Highlight Plugin]()
Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution.
The MooTools JavaScript Class
The...
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; }