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

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

input 类型为 number 时如何去掉数字加减上下箭头_第1张图片

添加以下 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; /* 此处写不写都可以 */
}

添加以上样式,将加减数字按钮去掉
input 类型为 number 时如何去掉数字加减上下箭头_第2张图片

你可能感兴趣的:(项目问题,小知识点,前端,html,javascript)