HTML input type="number" 不显箭头 - MilkeZhang 的网络笔记

在HTML中，当<input>元素的type属性设置为number时，

一些浏览器会自动显示其自带的箭头，方便用户快速增加或减少数值。然而，有时我们可能想要隐藏这些箭头。

要隐藏number类型输入框的箭头，可以使用CSS。以下是一个简单的CSS样式，用于隐藏输入框的箭头：

/* 针对WebKit内核浏览器的样式 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
/* 针对Firefox浏览器的样式 */
input[type="number"] {
    -moz-appearance: textfield;
}

将上述CSS代码添加到你的样式表中，就可以隐藏number类型输入框的箭头了。

请注意，不是所有浏览器都支持这种方法隐藏输入框的箭头，因此你可能需要写多种兼容性样式。

上述代码已经涵盖了最常见的WebKit内核和Firefox浏览器。