一、时间选择的种类:

HTML代码：
选择日期：<input type="date" value="2018-11-15" />

选择时间：<input type="time" value="22:52" />

选择星期：<input type="week" />

选择月份：<input type="month" />

DateTime-Local类型：<input type="datetime-local"/>

二、.对日期时间控件的样式进行修改

目前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 –这是控制清除按钮的

实例

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

/* 去掉date中上下小三角，但是保留input类型为number的小三角。 */

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

/*----------用来移除叉叉按钮 鼠标移上去还会显示----------*/

input[type="date"]::-webkit-clear-button{ display:none; }

代码

  <style>

             /* 控制编辑区域的 */

           input[type="date"]::-webkit-datetime-edit{

             /* content: '起始时间'; */

             color: rgb(,,);

             padding-left: 10px;

           }

           /* 控制年月日这个区域的 */

           input[type="date"]::-webkit-datetime-edit-fields-wrapper {

             background-color: #eee;

           }

           /* 这是控制年月日之间的斜线或短横线的 */

           input[type="date"]::-webkit-datetime-edit-text {

             color: blue;

             padding:  .3em;

           }

           /* 控制年字 */

           input[type="date"]::-webkit-datetime-edit-year-field {

             color: purple;

           }

           /* 控制月字 */

           input[type="date"]::-webkit-datetime-edit-month-field {

             color: red;

           }

           /* 控制日字 */

           input[type="date"]::-webkit-datetime-edit-day-field  {

             color: pink;

           }

         /*控制下拉小箭头的*/

         input[type="date"]::-webkit-calendar-picker-indicator {

           display: inline-block;

           width: 15px;

           height: 15px;

           /* position: absolute;

           top: 12px;

           right: 0px; */

           border: 1px solid #ccc;

           border-radius: 2px;

           box-shadow: inset  1px #fff,  1px #eee;

           background-color: #eee;

           /* background:url('../images/icon.png') -188px -99px; */

           background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);

           color: #;

         }

         /* 去掉date中上下小三角，但是保留input类型为number的小三角。 */

         input[type=date]::-webkit-inner-spin-button {

           visibility: hidden;

         }

         /*----------用来移除叉叉按钮 鼠标移上去还会显示----------*/

         /* input[type="date"]::-webkit-clear-button{

          display:none;

         } */

     </style>

 </head>

 <body>

     <div class="time_box">

         <input type="date">

     </div>

 </body>

默认---点击时间表单的效果

修改完后

三、以下的囊括了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{}

input时间表单默认样式修改（input[type="date"]）的更多相关文章

  1. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  2. input选择框默认样式修改

    input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...

  3. 在vue组件的stylus样式总 取消search类型的input按钮中默认样式

    在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...

  4. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  5. chrome浏览器默认样式覆盖input背景

    问题描述:input表单添加了背景图片,结果自动填充是,编程了一个淡黄色矩形方框. 解决方案:网上查询了很多的解决方式,基本都不管用,这里我简单说两个. 1.去除黄色背景 input:-webkit- ...

  6. input框改变默认样式

      input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ ...

  7. 去除移动端苹果手机（ios）的input默认样式与input禁止键盘出现的方式

    样式: input{-webkit-appearance: none;} 在iPhone plus点击input框出生日期时会出现如下图: 为了去掉下面那条苹果自带的,可以这样处理:在HTML中的in ...

  8. 伪元素改变date类型input框的默认样式实例页面

    CSS代码: ::-webkit-datetime-edit { padding: 1px; background: url(/study/image/selection.gif); } ::-web ...

  9. HTML复选框checkbox默认样式修改

    此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...

随机推荐

  1. OpenStack实践系列⑤网络服务Neutron

    OpenStack实践系列⑤网络服务Neutron 3.8 Neturn 服务部署 注册neutron服务 [root@node1 ~]# source admin-openrc.sh [root@n ...

  2. Less常用知识点

    上篇文章介绍了如何安装Less,我们将所有东西都写在.less里面,最后通过命令将.less转换成.css文件,就可以放入到项目里用了.今天了解一些less常用知识点. 1.变量:声明两个变量,一个是 ...

  3. 04 if条件判断 流程控制

    条件判断 if 语法一: if 条件: # 条件成立时执行的子代码块 代码1 代码2 代码3 示例: sex='female' age=18 is_beautiful=True if sex == ' ...

  4. Swift 新增fileprivate 详解

    以前项目中只要用了private  那么在同一个文件同一个类中还是能访问的(比如一个类中写了一个extension) swift3.0现在不行了 新增了一个fileprivate 的访问控制 以前的p ...

  5. Java的家庭记账本程序（C）

    日期:2019.2.4 博客期:029 星期一 今天初步修改了程序,实现了几个基本的功能: 个人信息管理.除查询以外的全部功能!

  6. kali linux revealed mastering the penetration testing distribution

    1.本博客记载的是这本书的学习笔记,还有出现的一些不懂的单词 我也将会记载这篇博客中.记载顺序是按照本书的章节顺序来记载的.最喜欢本书中的一句   you havae no idea how good ...

  7. java多线程机制中的Thread和Runnable()区别

    1.java语言使用Thread类及其子类对象来表示线程,新建的一个线程声明周期中经历 新建.(声明一个线程,此时他已经有了相应的内存空间和其他资源),运行(线程创建之久就据用了运行的条件,一旦轮到使 ...

  8. border画梯形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  9. 使用Java及相关内容的目标

    培养设计高性能并发服务器架构能力. 基于高性能并发,创新应用和服务.

  10. 正则表达式过滤html标签

    1.说明:需要使用非贪婪模式 2.示例 过滤所有span标签: var newContent = Regex.Replace(htmlContent, "<span.*?>.*? ...