关键词搜索

全站搜索
×
密码登录在这里
×
注册会员
×

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

css input type=number类型去掉上下箭头

发布2022-06-30 浏览1031次

详情内容

在设置了input type=number类型自动带上下箭头,很难看,可通过以下css方式去掉number类型,去掉上下箭头。

先看下效果:

只要在css样式里面写以下样式即可:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type='number'] {
  -moz-appearance: textfield;
}

ps:如果上面这个样式不生效,需要看下 style标签 是否添加了scoped,如果是,那么需要在进行样式穿透,即在样式代码块前添加 ::v-deep 或者 /deep/ 即可

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield;
}

或者是这样:

::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;
}


最终number类型去掉上下箭头效果图

点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
确定支付下载