Html去除Input数字类型输入框右侧的上下箭头

2022-04-24 944点热度 0人点赞 0条评论

Html中input输入框,如果设置属性type="number"可以限制用户仅能输入数字(不过限制不能完全自定义,有自定义需求的,请查看:https://blog.terrynow.com/2022/04/20/vuejs-iview-input-allow-digits-or-specified-chars/),但是加上这个属性后,发现输入框右侧有个上下的箭头,可以给输入的数字+1后者-1,但是因为一些特定的要求,产品要求我们去掉或者隐藏这个上下箭头,如图:

实现方式

可以利用css实现,Html代码如下:

<input type="number" placeholder="请输入" class="my-input1" />

给input输入框加上的如下class(my-input1)

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

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论