在HTML5中顯示微調輸入類型編號

Question

我正在使用HTML5，我正在使用數字控件（input type="number"）。默認情況下，我需要微調控制器（向上箭頭&）在控件中可見，現在懸停它是可見的。

我可以通過CSS實現嗎？或者還有其他方法嗎？

Answer 1

您可以使用僞類-webkit-inner-spin-button和-webkit-outer-spin-button來實現此目的。請注意，此技巧僅適用於基於Webkit的瀏覽器，例如Chrome。

例子：

/* Always */ 
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    opacity: 1; 
} 

既然你想在觸發懸停事件顯示，前面的例子是：

/* On hover */ 
input[type=number]:hover::-webkit-inner-spin-button, 
input[type=number]:hover::-webkit-outer-spin-button { 
    opacity: 1; 
} 

檢查這個snippet看到一個工作示例。

如果你想擴展你的功能到其他瀏覽器，你將需要創建一個小部件。最快的方法是使用jQuery UI Spinner widget。