Html 是否可以始终为输入“数字”显示向上/向下箭头？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25194631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to always show up/down arrows for input "number"?
提问by Oneezy
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/
我想始终为输入“数字”字段显示向上/向下箭头。这可能吗？到目前为止，我还没有任何运气......
http://jsfiddle.net/oneeezy/qunbnL6u/
HTML:
HTML：
<input type="number" />
CSS:
CSS：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: "Always Show Up/Down Arrows";
}
回答by BHyman
You can achieve this (in Chrome at least) by using the Opacity property:
您可以通过使用 Opacity 属性来实现这一点（至少在 Chrome 中）：
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.
如上所述，这可能只适用于 Chrome。所以在野外使用此代码时要小心，不要为其他浏览器提供后备。
回答by apaul
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 widgetit offers a lot more versatility when it comes to styling.
试试jQuery UI 的微调小部件，它在样式方面提供了更多的多功能性。
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value" />
</p>
$("#spinner").spinner();
回答by Atta H.
I tried this and it worked
我试过了，它奏效了
input[type=number]::-webkit-inner-spin-button {
opacity: 1
}
</style>
<input type="number" value="1" min="1" max="999">
