input 类型为 number 时如何去掉数字加减上下箭头

Fighting_p

已于 2022-08-17 15:29:21 修改

阅读量6.3k

点赞数 5

分类专栏：项目问题小知识点文章标签：前端 html javascript

于 2022-08-17 15:21:31 首次发布

本文链接：https://blog.csdn.net/m0_53562074/article/details/126386772

版权

项目问题同时被 2 个专栏收录

100 篇文章 1 订阅

订阅专栏

小知识点

18 篇文章 0 订阅

订阅专栏

input 类型为 number 时，输入框右侧有数字加减按钮，想将该按钮去掉

在这里插入图片描述

添加以下 css 代码

/* input 类型为 number 时去掉数字加减上下箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield; /* 此处写不写都可以 */
}

以上代码若无效，则可使用深作用选择器 ::v-deep 或 >>> 或 /deep/

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
  -moz-appearance: textfield; /* 此处写不写都可以 */
}

>>> input::-webkit-outer-spin-button,
>>> input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

>>> input[type="number"] {
  -moz-appearance: textfield; /* 此处写不写都可以 */
}

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/deep/ input[type="number"] {
  -moz-appearance: textfield; /* 此处写不写都可以 */
}