自定義HTML數字輸入中向上/向下箭頭的外觀

Question

我有興趣使用一些基本的HTML元素來讓用戶增加數字輸入字段中的值。

我知道這是可能的通過Javascript/JQuery rewiring，但是有可能與這些箭頭沒有JS交互？

謝謝！

Answer 1

是的，你可以（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"> 

See JSFiddle method 1

See JSFiddle method 2

Reference