html文本框有个小箭头,去掉input(number类型)输入框箭头的方法教程

在web前端中，number类型的input输入框在获得鼠标焦点的情况下，会出现两个向上和向下的箭头。虽然箭头可用于input输入框中的数字增大和减小，但在某些特定的场景中反而会让用户产生错乱的感觉。为了避免此情况的发生，我们可以使用css样式来隐藏掉 input 中的箭头，下面来说说方法！

number类型input输入框去掉箭头的教程

1、先看一下默认的number类型input的输入框的样式

number 类型 input 输入框的默认代码如下，下面的截图来自 chrome 浏览器，其它浏览器所展示的箭头样式有所不同！

2、通过CSS样式代码来隐藏掉输入框中的上下箭头

css代码/* chrome */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

-webkit-appearance: none;

}

/* 火狐浏览器 */

input[type="number"]{

-moz-appearance: textfield;

}

3、查看添加CSS样式后的input样式

添加上面的样式后，可以看到输入框input类型为number时，已去掉了上下的箭头。

4、完整的示例代码html>

Document

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

-webkit-appearance: none;

}

input[type="number"]{

-moz-appearance: textfield;

}