jQuery 自定义 HTML 数字输入中向上/向下箭头的外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24537234/
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
Customize appearance of up/down arrows in HTML number inputs
提问by charliesneath
I'm interested in sticking with some basic HTML elements to let users increment the value in a number input field.
我有兴趣坚持使用一些基本的 HTML 元素来让用户增加数字输入字段中的值。
I know this is possible through Javascript/JQuery rewiring, but is it possible to interact with these arrows without JS?
我知道这可以通过 Javascript/JQuery 重新布线，但是是否可以在没有 JS 的情况下与这些箭头进行交互？
Thanks!
谢谢！
回答by Justin
Yes, you can (webkit only I assume):
是的，你可以（我假设只有 webkit）：
<style>
input[type=number] {
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0 8px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]:hover::-webkit-inner-spin-button {
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
</style>
<input type="number" value="0">
