Force up and down arrow for number input

Those with a keen eye will notice that the up and down arrows for the number input doesn’t show up in Chrome (and some other WebKit based browsers) until you hover or are focused on the input.

To force the arrows to be visible we just need to change the opacity of the inner and outer spin button.


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.


This entry was posted in CSS.

This post currently has no responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *