# 始终显示input标签在type值为number状态下的箭头

> "number"类型的 元素用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。右侧末端将会有上下箭头可供鼠或手指对输入的数值进行增加或减少操作。

Author: DeathGhost
Published: 2021-08-13 22:27:32
Category: css
Canonical: https://www.deathghost.cn/article/css/100
Keywords: input, number, 输入数字, 箭头显示, 上下箭头, 显示控件, focus, 表单, 递增, 递减

<input type ="number">元素可以帮助您在构建用户界面和将数字输入到表单中的逻辑时简化你的工作。 当你使用正确的 type 值 "number" 创建数字输入时，会自动验证你输入的文本是否为数字，通常是一组向上和向下按钮。

![始终显示input标签在type值为number状态下的箭头](https://www.deathghost.cn/public/upload/article/2021/08/13/1628866562811872.jpg)

始终显示input标签在type值为number状态下的箭头

## input数字输入

<input type="number"/>

我们都知道，在页面中插入元素<input type ="number"/>，默认状态下，我们在WebKit浏览器中看到的与普通的文本输入框一样，只有在光标聚焦（focus）在input元素上时方才显示上下箭头按钮。

但是在某些场景下，我们想直接指示用户可通过鼠标点击操作上下箭头按钮，进行数值递增或递减变更。

## 那么我们如何通过CSS将其控件默认显示，而非聚焦时才显示？

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
所以，WebKit内核浏览器的<input type ="number">上下箭头按钮我们可以通过这么一段样式将其设为显示状态。

当然了，如果不让显示上下箭头按钮，可以将opacity设为0即可。火狐浏览器可以通过设置appearance进行隐藏操作控件。

## Related

- Previous: [CSS 设置插入光标形状与颜色](https://www.deathghost.cn/article/css/97)
- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)