热搜：编程 Python Microsoft 编程语言 C++

去掉input(number类型)输入框箭头的方法好代码教程

发布时间：2022-12-25 14:28:33 来源：网络

.

风景优美的黄山景区，一年四季游人如织。蜀僧抱绿绮，西下峨眉峰。为我一挥手，如听万壑松。客心洗流水，馀响入霜钟。不觉碧山暮，秋云暗几重。

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

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

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

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

<input type="number" >

QQ截图20200905211235.jpg

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时，已去掉了上下的箭头。

QQ截图20200905214027.jpg

4、完整的示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button { 
            -webkit-appearance: none; 
        }
        input[type="number"]{ 
            -moz-appearance: textfield; 
        }
    </style>
</head>
<body>
    <!-- http://www.feiniaomy.com-->
    <input type="number" >
</body>
</html>

以上就是去掉input(number类型)输入框箭头的方法好代码教程。成长，本身就是一个很痛的词。你想要的或好或坏，时间都会给你。更多关于去掉input(number类型)输入框箭头的方法好代码教程请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章: