去掉input[type=“number“]的默认样式

最新推荐文章于 2022-07-18 18:41:23 发布

@SIMIN

最新推荐文章于 2022-07-18 18:41:23 发布

阅读量403

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/SIMIN_1617/article/details/113881651

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用CSS针对Chrome和Firefox浏览器分别去除输入框内用于输入小数点的按钮。通过设置`-webkit-appearance`和`-moz-appearance`为none，可以隐藏Chrome的外层和内层小数点按钮，同时将Firefox的输入框样式设置为文本字段。

摘要由CSDN通过智能技术生成

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
  -webkit-appearance: none !important; 
}/* chrome */

input[type="number"]{
  -moz-appearance:textfield;
}/* firefox */

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@SIMIN

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

转载原生input type=‘date‘

qq_42546847的博客

07-15

533

html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码：选择日期：选择时间：选择星期：选择月份： 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI： ::-webkit-datetime-edit – 控制编辑区域的 ::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的 ::-webkit-datetime-edit-text – 这是控制年月日之间的斜线或短横线的 :

html range样式修改,自定义(滑动条)input[type="range"]样式

weixin_39551554的博客

06-04

1859

这是我的第一篇博文，也是我这个小白努力的起点。刚接触JavaScript没多久，如果文中有错误的地方欢迎大家指正，或者给予建议，让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件，也是常见的控件的之一，不过这个控件的原始样式略丑，所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不...

参与评论您还未登录，请先登录后发表或查看评论

去除input[type=number]的默认样式

weixin_33932129的博客

01-03

116

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

input type类型为number 去除默认样式(箭头)

m0_60053251的博客

10-14

920

input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

CSS小技巧--去除input[type=number]的默认样式

weixin_33895657的博客

06-19

3701

input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 复制...

改变input的默认样式

cyx1874的博客

10-22

562

1. 聚焦时不出现蓝色边框 outline:none; 2.修改 input 默认的placeholder input::-webkit-input-placeholder { font-size: 0.4rem; //字体 color: #CCCCCC; //颜色 letter-spacing: 0px; } 兼容浏览器 input:-m...

输入框带有number的标签

m0_68516215的博客

07-18

1640

输入框搜索中用了el-input-number标签，但是用这个这自带默认值0，这么解决呢？ 1.在输入框双向绑定的字段在data中给字段写成undefined 2.还有一种情况就是在点击本页面的时候，就触发了接口，可以给触发接口处也改成undefined，但是又有问题，在本地没有问题，但是在测试中出现了第一次传入的数据是undefined，不符合要求 3.最后可以改掉这个标签换成别的，我当时写的是只能填写数字，如果填写的非数字会在失去焦点之后清空输入框，当时百度了一个正则表达式<el-input

HTML5去掉输入框type为number时的上下箭头的实现方法

11-21

以下是如何去掉`<input type="number">` 上下箭头的两种方法： **一、公共样式** 这种方法适用于大多数基于Webkit内核的浏览器，如Chrome和Safari。通过使用伪元素选择器，我们可以将箭头的外观设置为`none`： ``...

input,type="number"我不想要其中的自增自减按钮，如何去掉或隐藏

最新发布

10-12

将`type`属性设为`number`，然后添加一个ID（例如`noIncrementDecrement`），并设置`style`属性的`appearance`属性为`none`，这会让浏览器去除默认样式。 2. **CSS** (仅限于现代浏览器支持): ```css #...

Javascript——＜input＞: 输入（表单输入）元素的type和样式属性

mintsolace的博客

08-19

2078

<label for="name">Name (4 to 8 characters):</label> <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10"> label { display: block; font: 1rem 'Fira Sans', sans-serif; } input, label {

去掉input[type="number"]的默认样式

毒牙

02-05

3736

/* 去掉input number 默认样式 */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; } /* chrome */ input[type="number"]{ -moz-appearance:text...

Element-UI关于input[type=number]的处理（去掉默认不显示上下箭头样式）

lannieZ的博客

06-09

1825

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

html 编辑框取消默认样式,html5中如何更改、去掉input type默认样式

weixin_42350940的博客

06-22

1070

1、如何去掉input type=date 默认样式HTML代码：选择日期：选择时间：选择星期：选择月份：目前WebKit下有如下9个伪元素可以改变日期控件的UI：::-webkit-datetime-edit – 控制编辑区域的::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的::-webkit-datetime-edit-text – 这是控...

去除 input type=number 的样式

laoyaoshilaoyao的博客

02-16

1371

input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

CSS小技巧——去除input[type=number]的默认样式

weixin_33858249的博客

05-21

4376

前：后：代码： input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margi...

改变number类型input框的默认样式