html5中，input type="number"時(shí) 右邊會(huì)有一個(gè)上下小箭頭，介紹去掉這個(gè)箭頭的方法，完成瀏覽器的兼容，頁(yè)面效果的統(tǒng)一
一。公共樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>去掉輸入框type為number時(shí)的上下箭頭</title>
<style>
/*谷歌*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/*火狐*/
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<input type="number" ...>
</body>
</html>
二。專用樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>去掉輸入框type為number時(shí)的上下箭頭</title>
<style>
/*在谷歌下移除input[number]的上下箭頭*/
.inputNumber input[type='number']::-webkit-outer-spin-button,
.inputNumber input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
/*在firefox下移除input[number]的上下箭頭*/
.inputNumber input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<input type="number" class="inputNumber" placeholder="請(qǐng)輸入電話號(hào)碼"> 1
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的HTML5去掉輸入框type為number時(shí)的上下箭頭的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
標(biāo)簽：盤錦 聊城 萍鄉(xiāng) 金昌 綏化 中山 赤峰 阿壩
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5去掉輸入框type為number時(shí)的上下箭頭的實(shí)現(xiàn)方法》，本文關(guān)鍵詞 HTML5,去掉,輸入,框,type,為,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
