html

預設：<input type="number" /></br>
處理：<input type="number" class="deal-with" />

css 去除控制元件

<style type="text/css">
.deal-with::-webkit-textfield-decoration-container {
    background-color: #f0f3f9;
}   
		
/*下邊兩行是去掉input 輸入框右邊的上下箭頭按鈕 */
.deal-with::-webkit-inner-spin-button {
   -webkit-appearance: none;
}
.deal-with::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>
 

寫到這裡你是不是已經覺得這樣做很ok了。
覺得很完美了
但是如果你是用的是火狐瀏覽器的話
以上程式碼完全就沒有起到任何的作用了
上下的控制元件任然顯示出來了
怎麼處理

/* 針對火狐 */
input{ 
   -moz-appearance:textfield;
}
你會發現解決了控制元件
但是有會出現一個新的問題
可以輸入漢字了；不能限制類型的的處理
違背了我們設定為 type=number 的初衷

經過大量的查閱資料，
.由於火狐裡=對 input type =“number” 這個屬性的支援不太友好
對於這個屬性慎用慎用  我個人不建議使用 <input type="number" />
因為這個是H5的新特性  對他支援還不是太友好的！！！！