【VUE】 input输入框设置type=number时,去掉后面的上下按钮
当 input type=number 时,去掉后面的上下按钮在style里面添加此段代码即可input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}input[type="number"]{-moz-appearance: textfield;}在现在项目中,使用的是
当 input type=number 时,去掉后面的上下按钮
在style里面添加此段代码即可
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
在现在项目中,使用的是vue+element,通常写当前页面的样式时使用scoped,但是这样会发现上面的代码失效,此时需要使用/deep/去寻找
【定义样式】去除表框、去除上下箭头、去除滚轮事件
<style scoped lang="scss">
/deep/ .aaa input::-webkit-outer-spin-button,
/deep/ .aaa input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/ .aaa input[type="number"]{
-moz-appearance: textfield;
}
/deep/ .bbb inpit{
border: none
}
</style>
------其中aaa均为你的代码中对应的class值
【引用样式类】
<el-input
type="number"
class="aaa,bbb"
...
/>
【拓展】禁止input['number']的上下按键后,通常还需要,禁用滚轮事件;
盖上遮罩之后不需要下面内容支持滚动
@mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件
<div @mousewheel.prevent>
<el-input
type="number"
class="aaa,bbb"
...
/>
</div>
更多推荐
所有评论(0)