一、时间选择的种类:

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. 运维与自动化系列③自动化部署基础与shell脚本实现

    自动化部署基础与shell脚本实现 关于自动化的基础知识: 1.1:当前代码部署的实现方式: 运维纯手工scp到web服务器纯手工登录git服务器执行git pull或svn服务器执行svn upda ...

  2. sugarCrm翻译

    Logic Hook hook配置信息和触发器定义在以下目录中 ./custom/Extension/modules/<module>/Ext/LogicHooks/<file> ...

  3. chan array初始化

    package main import "fmt" func run() { chann[0] <- 1 } var chann = make([]chan int, 2) ...

  4. 51nod--1242 斐波那契数列第N项 （矩阵乘法优化）

    题目: 1242 斐波那契数列的第N项 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 斐波那契数列的定义如下: F(0) = 0 F(1) = 1 F(n) ...

  5. MySQL跟踪SQL执行之开启慢查询日志

      查询慢查询相关参数   show variables like '%quer%';   slow_query_log(是否记录慢查询)   slow_query_log_file(慢日志文件路径) ...

  6. [C][代码实例]整型数组二分排序

    #include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <string.h& ...

  7. oracle 新增一条数据时设置id自增

    CREATE SEQUENCE test_seq    --创建一个test_seq序列INCREMENT BY 1   --每次加1START WITH 1     --从1开始NOMAXVALUE ...

  8. tornado的异步效果

    第一种方式: import tornado.ioloop import tornado.web from tornado import gen from tornado.concurrent impo ...

  9. Python-mysql 权限 pymysql 注入共计

    1.mysql用户管理 *** 数据安全非常重要 不可能随便分配root账户 应该按照不同开发岗位分配不同的账户和权限 mysql中 将于用户相关的数据放在mysql库 user - > db ...

  10. Docker快速搭建WordPress博客网站

    WordPress WordPress是一个非常著名的PHP编写的博客平台,发展到目前为止已经形成了一个庞大的网站平台系统.在WP上有规模庞大的插件和主题,可以帮助我们快速建立一个博客甚至网站. 在W ...