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

最新推荐文章于 2024-09-11 15:05:16 发布

jennypypy

最新推荐文章于 2024-09-11 15:05:16 发布

阅读量1.9w

点赞数 2

本文链接：https://blog.csdn.net/panying0903/article/details/46620273

版权

css 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

input

2 篇文章 0 订阅

订阅专栏

默认样式

1 篇文章 0 订阅

订阅专栏

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;
}

参考地址：

伪元素表单控件默认样式重置与自定义大全

http://www.zhangxinxu.com/wordpress/2013/06/%E4%BC%AA%E5%85%83%E7%B4%A0-%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F-pseudo-elements-style-form-controls/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jennypypy

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

element输入框type=‘number‘,去除样式

weixin_43139830的博客

04-21

735

element ui 样式、问题记录 // type='number'样式去除 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; }

Element-UI el-input组件type=“number“的样式修改

Jana Jing的分享

07-14

6097

el-input组件

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

element input-number 默认值设置为空

02-26

element input-number 当值传入的为''时，默认显示为0，有些情况我们不希望显示0，而是显示为空，针对这种情况我们对element input-number的源码做了兼容处理

app css reset

weixin_30486037的博客

12-04

140

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, a...

el-input设置type=‘number‘和v-model.number的区别

weixin_46394325的博客

09-11

861

el-input设置type=‘number’和.number修饰符的区别

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

热门推荐

小记心得

10-15

1万+

当你遇到input元素中，type设置为数字格式number时;心中也许会有疑惑： input的type="number"在部分手机端会出现一个小按钮要如何解决? 怎么移除HTML5 input在type="number"时的上下小箭头？如何移除 input type="number" 时浏览器自带的上下箭头？以上疑惑怎么解决；很简单，只要css控制即可。 css代码： i

解决input number样式以及在移动端可输入字符的问题

大桶爆米花eee

01-09

3500

默认在输入框最右有一个上下箭头，可以调节数字大小，如下图，但是我不需要，在css中加上以下代码，让上下箭头消失 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: ...

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

11-21

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

转载原生input type=‘date‘

qq_42546847的博客

07-15

542

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

1878

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

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

最新发布

10-12

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

HTML5新增的input元素类型：number、range、email、color、date等

pan_junbiao的博客

07-08

1160

HTML5 大幅度地增加与改良了 input 元素的种类，可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。到目前为止，大部分浏览器都支持 input 元素的种类。对于不支持新增 input 元素的浏览器，input 元素被统一视为 text 类型。另外，HTML5 中也没有规定这些元素在浏览器中的外观形式，因此同样的 input 元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些新增的 input 元素的类型。daterange。

如何去掉input输入框的type为number时，右侧的上下箭头

weixin_56372270的博客

06-04

209

【代码】如何去掉input输入框的type为number时，右侧的上下箭头。

number类型的input样式修改及绑定左右按钮

aubery0928的博客

07-22

1291

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters</title> <style type="text/css"> ...

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

weixin_33895657的博客

06-19

3703

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[type="number"]的默认样式

毒牙

02-05

3743

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

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

weixin_33858249的博客

05-21

4387

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