CSS是前端開發(fā)不可或缺的一部分，它可以很好的控制網(wǎng)頁的樣式。常見的情況下，我們需要輸入數(shù)字，而輸入數(shù)字需要保障用戶輸入的純凈性。那么問題來了，如何讓輸入框只輸入數(shù)字呢？下面我們就來探討下這個(gè)問題。

input[type="text"]{
border: none;
border-bottom: 1px solid #ccc;
}
input[type="text"]:not(:focus) {
outline: none;
}
input[type="text"]:focus {
outline: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
input[type="number"]{
-moz-appearance: textfield;
}

代碼分析:

input[type="text"]：選擇所有input類型為文本的元素（input[type="text"]），并把邊框標(biāo)出來。
input[type="text"]:not(:focus)：選擇所有input類型為文本的元素，如果input是沒有focus的（:not(:focus)），就隱藏input的橙色輪廓線（outline:none）。
input[type="text"]:focus：選擇所有input類型為文本的元素，如果input是有focus的（:focus），就隱藏input的橙色輪廓線（outline:none）。
接下來，我們開始將HTML5的input[type="number"]特性應(yīng)用到我們的代碼中，來實(shí)現(xiàn)只允許輸入數(shù)字。
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
appearance: none;
margin: 0;
}
在這些CSS規(guī)則中，我們使用了-webkit-內(nèi)核的屬性，來禁用數(shù)字輸入框的上下箭頭。上述代碼中，appearance: none;是去掉數(shù)字輸入框的上下箭頭，margin: 0;是去掉數(shù)字輸入框的周圍留白。接下來，將-moz-appearance的值設(shè)置為textfield，這將去除Firefox的內(nèi)部微調(diào)器。