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 */
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.
new Element Madness
The first way to create UI-driven...
Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create fancy FAQs with MooTools -- here's how to create the same effect using jQuery.
Simply a series of H3s and DIVs wrapper...
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...