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实现阅读进度条
Feb 27 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
浅谈HTML5 & CSS3的新交互特性
Jul 19 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 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
检测png图片是否完整的php代码
2010/09/06 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
ORACLE十问
2015/04/20 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
司法所长先进事迹
2014/06/02 职场文书
员工自我工作评价
2015/03/06 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
物业公司管理制度
2015/08/05 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python