html5中去掉input type date默认样式的方法


Posted in HTML / CSS onSeptember 06, 2018

 html5中如何去掉input type date默认样式,下面通过本文给大家详细介绍,具体介绍如下所示:

2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:

::-webkit-datetime-edit – 控制编辑区域的
::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的
::-webkit-datetime-edit-text – 这是控制年月日之间的斜线或短横线的
::-webkit-datetime-edit-month-field – 控制月份
::-webkit-datetime-edit-day-field – 控制具体日子
::-webkit-datetime-edit-year-field – 控制年文字, 如2017四个字母占据的那片地方
::-webkit-inner-spin-button – 这是控制上下小箭头的
::-webkit-calendar-picker-indicator – 这是控制下拉小箭头的
::-webkit-clear-button –这是控制清除按钮的

以下的囊括了date,datetime,week,time所用的伪元素:

input::-webkit-datetime-edit{}
input::-webkit-datetime-edit-fields-wrapper{}
input::-webkit-datetime-edit-ampm-field{}
input::-webkit-datetime-edit-day-field{}
input::-webkit-datetime-edit-hour-field{}
input::-webkit-datetime-edit-millisecond-field{}
input::-webkit-datetime-edit-minute-field{}
input::-webkit-datetime-edit-month-field{}
input::-webkit-datetime-edit-second-field{}
input::-webkit-datetime-edit-week-field{}
input::-webkit-datetime-edit-year-field{}
input::-webkit-datetime-edit-ampm-field:focus{}
input::-webkit-datetime-edit-day-field:focus{}
input::-webkit-datetime-edit-hour-field:focus{}
input::-webkit-datetime-edit-millisecond-field:focus{}
input::-webkit-datetime-edit-minute-field:focus{}
input::-webkit-datetime-edit-month-field:focus{}
input::-webkit-datetime-edit-second-field:focus{}
input::-webkit-datetime-edit-week-field:focus{}
input::-webkit-datetime-edit-year-field:focus{}
input::-webkit-datetime-edit-year-field[disabled]{}
input::-webkit-datetime-edit-month-field[disabled]{}
input::-webkit-datetime-edit-week-field[disabled]{}
input::-webkit-datetime-edit-day-field[disabled]{}
input::-webkit-datetime-edit-ampm-field[disabled]{}
input::-webkit-datetime-edit-hour-field[disabled]{}
input::-webkit-datetime-edit-millisecond-field[disabled]{}
input::-webkit-datetime-edit-minute-field[disabled]{}
input::-webkit-datetime-edit-second-field[disabled]{}
input::-webkit-datetime-edit-text{}
input::-webkit-inner-spin-button{}
input::-webkit-calendar-picker-indicator{}
input::-webkit-calendar-picker-indicator:hover{}

date类型改变行高和高度那个小三角并不会根据大小调整,实在太丑了,所以决定把它隐藏掉。

下面的css可以去掉date中上下小三角,但是保留input类型为number的小三角。

input[type=date]::-webkit-inner-spin-button { visibility: hidden; }

input类型为date的输入框有以下属性,可以根据自己的需求自行调整。

::-webkit-datetime-edit { padding: 1px; background: url(../selection.gif); }
::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }
::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-inner-spin-button { visibility: hidden; }
::-webkit-calendar-picker-indicator {
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: inset 0 1px #fff, 0 1px #eee;
background-color: #eee;
background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
color: #666;
}

总结

以上所述是小编给大家介绍的html5中去掉input type date默认样式的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
html5新特性与用法大全
Sep 13 #HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 #HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 #HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 #HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 #HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 #HTML / CSS
html5/css3响应式页面开发总结
Oct 16 #HTML / CSS
You might like
PHP APC的安装与使用详解
2013/06/13 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
python 实现删除文件或文件夹实例详解
2016/12/04 Python
详谈python http长连接客户端
2017/06/12 Python
用python处理MS Word的实例讲解
2018/05/08 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
python读取xml文件方法解析
2020/08/04 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
简短大学毕业感言
2014/01/18 职场文书
顶撞老师检讨书
2014/02/07 职场文书
安全责任协议书
2014/04/21 职场文书
五一活动标语
2014/06/30 职场文书
单位消防安全责任书
2014/07/23 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
优秀团员个人总结
2015/02/26 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书