Is it possible to always show up/down arrows for input "number"?
HtmlCssInputWebkitShadow DomHtml Problem Overview
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";
}
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
I tried this and it worked
Solution 3 - Html
If you're trying to get the same appearance across different browsers you may be forced to use a plugin/widget or build one yourself, the main browsers all seem to implement number spinners differently.
Try jQuery UI's spinner widget it offers a lot more versatility when it comes to styling.
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value" />
</p>
$("#spinner").spinner();
Solution 4 - Html
I tried this and it's working
input[type=number]::-webkit-inner-spin-button {
opacity: 1
}
Solution 5 - Html
If you don't mind the focus on your input, do
document.getElementById(<id>).focus();