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 相关文章推荐
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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 魔术方法详解
2014/11/11 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
javascript解析json数据的3种方式
2014/05/08 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
JS重载实现方法分析
2016/12/16 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
React简单介绍
2017/05/24 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
利用python实现数据分析
2017/01/11 Python
python 自动重连wifi windows的方法
2018/12/18 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
python 制作网站小说下载器
2021/02/20 Python
写出二分查找算法的两种实现
2013/05/13 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
教师队伍管理制度
2014/01/14 职场文书
中学生个人自我评价
2014/02/06 职场文书
幼儿园招生广告
2014/03/19 职场文书
美容院店长岗位职责
2014/04/08 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
优秀创业计划书分享
2019/07/19 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL