火狐谷歌浏覽器去掉input type=number時控件的方法

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的新特性  對他支援還不是太友好的！！！！
           

我們公司正在尋找前端和後端，感興趣的小哥哥或者小姐姐可以私聊我

如果你是大佬，請帶我們飛

如果你是菜鳥，我們帶你飛

僅限成都

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。