CSS3可以讓我們在數(shù)字輸入框中實現(xiàn)很多漂亮的樣式。下面我們來看看一些例子。

/* 圓角樣式 */
input[type="number"] {
border-radius: 5px;
}
/* 邊框樣式 */
input[type="number"] {
border: 2px solid #ccc;
}
/* 聚焦樣式 */
input[type="number"]:focus {
border: 2px solid #0077cc;
box-shadow: 0 0 5px #0077cc;
}
/* 清除樣式 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* 按鈕樣式 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
background-color: #0077cc;
color: #fff;
font-size: 16px;
padding: 5px 10px;
border-radius: 5px;
position: relative;
right: 4px;
}
/* 禁用樣式 */
input[type="number"]:disabled {
background-color: #f1f1f1;
color: #ccc;
}

這里展示了幾個常用的數(shù)字輸入框樣式，你可以根據(jù)自己的需求進行修改和定制。同時注意兼容性，這些樣式在不同瀏覽器上可能存在差異。