htmlcssinputwebkitshadow-dom

Is it possible to always show up/down arrows for input "number"?

I want to always show up/down arrows for input "number" field. Is this possible? So far I haven't had any luck...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML:

<input type="number" />

CSS: 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}
Solution

  • You can achieve this (in Chrome at least) by using the Opacity property:

    input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

    As stated above, this will likely only work in Chrome. So be careful using this code in the wild without a fallback for other browsers.