css或html5怎样移除input type number 上下小箭头 = 飞龙博客

css或html5怎样移除input type number 上下小箭头 (314)

怎样移除 HTML5 input 在 type="number" 时的上下小箭头？
飞龙试了一下，主要有2种方法，可以移除此数字下拉框type="number" 右边的上下小箭头。

方法1：
将 type="number" 改为 type="tel"
同样只能输入数字，弹出数字键盘，但是不出现上下箭头，很好。

<input type="tel" name="numIs" value="1" maxlength="1" />

1	<input type="tel" name="numIs" value="1" maxlength="1" />

方法2：
针对 input type="number" 的元素，添加 spin0 的样式名即可。

.spin0{-moz-appearance:textfield;}
.spin0::-webkit-outer-spin-button,
.spin0::-webkit-inner-spin-button{-webkit-appearance:none}

.spin0{-moz-appearance:textfield;}

.spin0::-webkit-outer-spin-button,

.spin0::-webkit-inner-spin-button{-webkit-appearance:none}

<input type="number" class="spin0" name="numIs" value="1" maxlength="1" />

1	<input type="number" class="spin0" name="numIs" value="1" maxlength="1" />

是不是很简单？

2008-03-18 ~ 2021-01-22

加入收藏夹，查看更方便。