input改为number类型，去掉上下箭头

input框只能输入的是number类型的内容，所以我直接写成了 type="number" ，虽然实现了这个功能，但input框后面出现了上下箭头，看起来巨丑无比！

只要在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;
}

此时页面上就没有上下箭头了

input改为number类型，去掉上下箭头相关推荐

Input标签的type设置为number，去掉上下箭头
Input标签的type设置为number,去掉上下箭头 css代码如下: < style >input::-webkit-outer-spin-button, input::-webki ...
input输入框为number类型时，去掉上下小箭头
input输入框type为number时,去掉上下小箭头,方式如下: <input type="number" ...><style>/* 在Chrome浏 ...
html文本框有个小箭头,去掉input(number类型)输入框箭头的方法教程
在web前端中,number类型的input输入框在获得鼠标焦点的情况下,会出现两个向上和向下的箭头.虽然箭头可用于input输入框中的数字增大和减小,但在某些特定的场景中反而会让用户产生错乱的感觉. ...
【Antdv】input type=number去掉上下箭头、提示文字、鼠标滚轮
数字输入框在项目中十分常用,但是有一些属性影响使用体验.解决方案如下: 1.整数文字提示解决方法,将title="" title="" 2.鼠标滚轮会修改数值 ...
H5去掉输入框type为number时的上下箭头
H5去掉输入框type为number时的上下箭头 html5中,input type="number"时右边会有一个上下小箭头,介绍去掉这个箭头的方法,完成浏览器的兼容,页面 ...
html上下箭头控制文本框加减,HTML5去掉输入框type为number时的上下箭头的实现方法...
html5中,input type="number"时右边会有一个上下小箭头,介绍去掉这个箭头的方法,完成浏览器的兼容,页面效果的统一一.公共样式去掉输入框type为numb ...
征服number类型的input框
在移动端H5页面开发中,有时候会有一些数值输入方面的需求.如果需要让用户比较方便地输入小数.负数,最简单的方式是使用number类型的input框,输入时软键盘会切换为数字键盘方便输入(ios是带数字 ...
element ui el-input输入框type=number去掉上下箭头
使用vue框架写法 <div class="container"><el-input v-model="value" type="n ...
【Mybatis】Mybatis将String类型的0存到数据库中的number类型字段中，变成了空；
一.问题 Mybatis将String类型的0存到数据库中的number类型字段中,变成了空: 二.分析自己写了一个自动写代码的脚本,带入springBatch后,读取文件时,少了序列号0-9的记录 ...

input改为number类型，去掉上下箭头

input改为number类型，去掉上下箭头相关推荐

最新文章

热门文章