input标签type为number时如何去除加减按钮效果

我们在使用input type = number 时只想输入数字时会出现如下图所示的效果显然这不是我们想要的

只需要我们简单把css样式改变下即可

/* 谷歌 */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;appearance: none;margin: 0;
}
/* 火狐 */input{-moz-appearance:textfield;
}

如果单独控制某个标签时只需要在前加上父级元素即可

粗略的代码希望对您有所帮助哦~

input标签type为number时如何去除加减按钮效果相关推荐

uniapp的input标签 type=“number“在移动端打开键盘不能输入小数点问题
uniapp的input标签 type="number"在移动端打开键盘不能输入小数点问题下面展示一些内联代码片. // An highlighted block <in ...
表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
input的type为number
1.右侧出现上下加减按钮不显示上下加减按钮解决 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webki ...
H5去掉输入框type为number时的上下箭头
H5去掉输入框type为number时的上下箭头 html5中,input type="number"时右边会有一个上下小箭头,介绍去掉这个箭头的方法,完成浏览器的兼容,页面 ...
html上下箭头控制文本框加减,HTML5去掉输入框type为number时的上下箭头的实现方法...
html5中,input type="number"时右边会有一个上下小箭头,介绍去掉这个箭头的方法,完成浏览器的兼容,页面效果的统一一.公共样式去掉输入框type为numb ...
winphone系统a、input标签被点击时产生的半透明灰色背景
在winphone系统下,链接a和input标签被点击是会产生半透明灰色背景. 下面就分享一下如何消除此问题,代码如下: 1 <meta name="msapplication-tap ...
html加减中间的值不能修改,在移动HTML5页面input类型采用number无法控制长度，以及右边显示难看的加减按钮...
场景: 这是之前做的移动web控件时遇到的问题.当时在我们控件的HTML5页面需要输入卡号.CV2.手机号.验证码等信息.大家都知道这些值都是数字.普通类型的输入框,当我们点击时,手机默认掉起的键盘 ...
解决：input框当type为number时maxlength失效
慕客网标明的用法是适用type为text和passswod的当我input框设置type为number的时候怎么限制输入长度呢?使用outinput就可以啦 <input type=" ...
uni-app中让input标签在点击时清空
<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1,动 ...

input标签type为number时如何去除加减按钮效果

input标签type为number时如何去除加减按钮效果相关推荐

最新文章

热门文章