html5中如何去掉input type date默认
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默认的更多相关文章
- 【转】html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...
- html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...
- H5中input[type="date"]默认样式修改 伪类
- html5中如何更改、去掉input type默认样式
1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" ...
- HTML5中input[type='date']自定义样式
HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...
- (网页)HTML中INPUT type="date"标签如何赋值注意问题(转)
现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...
- input时间表单默认样式修改(input[type="date"])
一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...
- <input type="date">设置默认当前日期
日期选择器如下: <input type="date" id="start_date" name="start_date"> 注 ...
- input type date 解决移动端显示placeholder
在最近的一个项目中使用到了html5的一个新标签属性,type="date"时,发现placeholder属性失效无法使用. 如果是这样的效果,那么客户体验是可想而知的差了. 最后 ...
随机推荐
- 钉钉C# 使用数据接口要注意的问题
1.钉钉的数据json全部使用的首字母小写的驼峰写法,如果首字母大写,将读取接口失败. 2.钉钉的文档同一个接口可能有simple和非simple两种写法,如果发现数据不全,可以把simple去掉试试 ...
- 【核心】project(idea文件)、module(iml文件)到SSM集成、热部署、Tomcat启动、MAVEN依赖冲突
http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/project-composition-introduce.html 在 Inte ...
- MySQL相关信息之数据库操作(三)
1.创建数据库 CREATE {DATABASE | SCHEMA} [IF NOT EXISTS] DB_NAME [DEFAULT] CHARACTER SET [=] charset ...
- JS算法练习四
JS算法练习 1.将使用空格分隔单词使用驼峰命名连接起来: var str="HELLO world welcome to my hometown"; /*--先输入一个有空格分隔 ...
- [C++]线性链表之顺序表<一>
顺序表中数据元素的存储地址是其序号的线性函数,只要确定了存储顺序表的起始地址(即 基地址),计算任意一个元素的存储地址的时间是相等的,具有这一特点的存储结构称为[随机存储]. 使用的基本数据结构:数组 ...
- Restful API学习Day4 - DRF版本控制和认证
参考文档: Django REST framework基础:版本控制 Django REST framework基础:认证.权限.限制 为什么要有版本? 某些客户端 使用低版本只维护不开发新功能 v1 ...
- 《第一行代码-李兴华》-10.3 System类
10.3 System类 视频地址:System类 /** * * 统计某项操作执行时间 * */ long start = System.currentTimeMillis();//返回以毫秒为单位 ...
- 阿里前CEO卫哲:马云好玩,人工智能泡沫巨大,新零售重在社区
阿里前CEO卫哲:马云好玩,人工智能泡沫巨大,新零售重在社区 投资中国网 08-21 08:34 投中网(https://www.chinaventure.com.cn) 编者按:当下的技术时代,是跨 ...
- hibernate多表操作
一.表之间的关系 1.一对一 2.一对多 3.多对多 二.表之间关系建表原则 1.一对多:在多的一方创建一个外键,指向一的一方的主键 2.多对多:创建一个中间表,中间表至少有两个字段,分别作为外键指向 ...
- Django学习手册 - reverse()反转URL
前端: <h1>测试</h1> <a href="/ce_test/?id=1">1按键</a> <a href=" ...