一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
系列介绍
经常会被面试官问到这个怎么实现，或者怎么实现xx？
有些功能或者效果没有做过或者实现过，回答不出来，场面一度有些尴尬
于是打算出一个怎么实现系列，来实现xx功能或者xx效果，以此来提升自己的实战效果和能力。
本系列是一个开放系列，我实现的不一定是最好的，欢迎大家交流讨论
场景
面试官：input标签你应该经常使用吧，使用type类型为number的inptu标签时，输入框里会出现上下箭头，如果我不想出现上下箭头，那怎么去除这个上下箭头呢？
（思考了一会）
我：忘记怎么去除了
面试官：...
尝试解决
先创建一个html文件，在body里创建一个type为number的input
<body>
<input type="number" name="" id="" />
</body>
到浏览器查看
可以看到输入框里出现箭头了。
同时查看它的html结构，也没有发现有什么特殊的结构。故没法直接选中箭头，利用样式控制它隐藏
但是回顾我们上一系列
怎么实现系列：4.怎么修改input placeholder的文字颜色
该系列讲到，可以利用::placeholder伪元素来控制input里卖弄的placeholder的文字颜色。
思考一下，那么是否也会有其它的伪元素或者伪类可以控制number类型的input框里的上下箭头呢？
查阅资料
在博客园里一篇博客里查到相关资料
::-webkit-inner-spin-button – 控制input里的上下箭头
我们就可以用该伪元素来操作input框里的上下箭头，再加上样式来控制
input::-webkit-inner-spin-button {
appearance: none;
}
加上该样式后，到浏览器查看效果
发现input框里的箭头确实被隐藏了
小结
如果想隐藏type为number类型的input输入框里的上下箭头，我们可以使用::-webkit-inner-spin-button来控制隐藏它
