Always Show Arrows for Number Input

By  on  

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.

Recent Features

  • By
    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...

  • By
    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...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!