输入框限制只能输入数字

emo王子

于 2023-02-24 11:36:38 发布

阅读量576

点赞数

文章标签： css html javascript

本文链接：https://blog.youkuaiyun.com/aaaaaaaa_ewf/article/details/129197709

版权

当使用v-model.number绑定number类型输入框时，会自带一些浏览器默认样式。文章提供了针对Webkit（如Chrome,Safari）和Firefox的CSS代码，用于去除input[type=number]的旋转按钮样式，使其更加自定义化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input v-model.number="testValue" type="number">

会出现type="number"自带样式，当然可以通过添加以下css清除

/* 普通IE浏览器样式清除 */

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{

-webkit-appearance: none !important;

}

/* 火狐浏览器样式清除 */

input[type="number"]{

-moz-appearance:textfield;

}