一、时间选择的种类:

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. codis3.2安装报错dashboard.go:369: [PANIC] call rpc create-proxy to dashboard 127.0.0.1:18080 failed的处理

    codis3.2安装报错dashboard.go:369: [PANIC] call rpc create-proxy to dashboard 127.0.0.1:18080 failed的处理 执 ...

  2. <转载>bellman-ford算法

    转载来源:https://www.cnblogs.com/tanky_woo/archive/2011/01/17/1937728.html 相关文章: 1.Dijkstra算法: http://ww ...

  3. swift 实践- 07 -- UISwitch 开关

    import UIKit class ViewController: UIViewController { var uiswitch: UISwitch? override func viewDidL ...

  4. Confluence 6 访问日志脚本

    日志访问脚本在连接:https://confluence.atlassian.com/download/attachments/133267635/Atlassian-accessLogScripts ...

  5. Confluence 6 PostgreSQL 创建数据库和数据库用户

    一旦你成功的安装了 PostgreSQL 数据库: 创建一个数据库用户,例如 confluenceuser. 你的新用户必须能够  创建数据库对象(create database objects) 和 ...

  6. mac 端口占用问题

    查看端口号 终端输入:sudo lsof -i tcp:port 将port换成被占用的端口(如:8086.9998) 将会出现占用端口的进程信息. 杀死占用端口的PID进程 找到进程的PID,使用k ...

  7. AD9361寄存器配置顺序，循环模式，自收自发

    :] cmd_data; :] index; begin case(index) 'h000,8'h00};//set spi -- 'h3df,8'h01};//set init -- 'h037, ...

  8. SpringBoot集成多数据源

    多数据源就是连接多个数据库 1.在application.properties中配置两个数据库 spring.datasource.driverClassName=com.mysql.jdbc.Dri ...

  9. Nginx详解十二：Nginx场景实践篇之跨站访问相关

    跨站访问 浏览器请求一个页面的时候,发送了两个域名的请求 此情况不安全,容易出现CSRF攻击,所以浏览器禁止跨域访问 Nginx设置打开跨站访问 配置语法:add_header name value ...

  10. wampserver本地配置域名映射

    本地开发时,一般是在浏览器输入 http://localhost/项目文件夹名 来测试网页文件,你有没有想过在本地在浏览器输入你自己设定的一个域名进入项目文件夹中去,本地配置多域名可以测试二级域名以及 ...