CSS可以實現按鍵輸入數字的功能，下面我們來詳細了解一下。

input[type="number"] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
-webkit-appearance: none; 
margin: 0; 
}

當我們使用默認的input[type="number"]時，不同瀏覽器的默認樣式會有所不同。而上面的代碼可以統一樣式，使不同瀏覽器的輸入框看起來相同。

其中，-moz-appearance:textfield用于隱藏Firefox瀏覽器中的默認增減按鈕，而-webkit-appearance:none用于隱藏Chrome和Safari中的默認增減按鈕。

除了隱藏默認的增減按鈕，我們還可以使用CSS樣式自定義增減按鈕，如下所示：

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
position: absolute;
margin: 0;
right: 2.5px;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border: 1px solid #ccc;
width: 16px;
height: 16px;
font-size: 0;
line-height: 16px;
text-align: center;
color: #333;
cursor: pointer;
outline: none;
}
input[type="number"]::-webkit-inner-spin-button:before,
input[type="number"]::-webkit-outer-spin-button:before {
content: "+";
display: block;
font-size: 12px;
}
input[type="number"]::-webkit-inner-spin-button:active:before,
input[type="number"]::-webkit-outer-spin-button:active:before {
background-color: #ccc;
}

以上代碼將增減按鈕樣式設置成了純白色，帶有邊框，同時添加了“+”和“-”兩個文本。其中:before偽元素用于添加文本。當按下按鈕時，將會加深按鈕背景色。

通過以上代碼，我們可以輕松實現按鍵輸入數字的功能，同時通過樣式修改，還可以優化用戶體驗。