一、时间选择的种类:

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. Mac 系统重新安装的几种方法

    转:https://blog.csdn.net/feibozhulang/article/details/43734109 苹果官网说明: https://support.apple.com/en-u ...

  2. git pull/fectch

    git remote: show all remote repositories git push -u <X1> <>: set x1 as the default repo ...

  3. 【进阶1-2期】JavaScript深入之执行上下文栈和变量对象（转）

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://mp.weixin.qq.com/s/hZIpnkKqdQgQnK1BcrH6Nw 阅读笔记 JS是单线程的语言,执行顺序肯定是顺 ...

  4. 清北学堂 清北-Day5-R2-xor

    有 $ n $ 个物品,每个物品有两个属性 $ a_i,b_i $ ,挑选出若干物品,使得这些物品 $ a_i $ 的异或和 $ x \le m \(.问在这一限制下,\) b_i $ 的总和最大可能 ...

  5. js——类型转换

      总述                   类型转换:显式.隐式(自动) 隐式转换是由编译器自动进行的,基本主要抽象操作有ToPrimitive, ToNumber, ToString, ToBoo ...

  6. bat命令查询硬件信息

    bat命令查询硬件信息 50 需求是这样的写一个bat命令,当命令执行的时候,先请用户输入姓名,然后继续执行查询出以下信息并写入一个文件,文件名称随便,文件可以放在与当前命令同一个文件夹下.最终文件中 ...

  7. 【JS】中ajax的URL中包含中文，后台接收乱码

    [问题]ajax提交get请求,url中参数包含中文,后台接收到显示乱码. [解决方案]前台: function getSiteInfoByName(siteName){ var res; $.aja ...

  8. Java的动手动脑（六）

    日期:2018.11.8 星期四 博客期:022 --------------------------------------------------------------------------- ...

  9. 【转载】中文输入法下onKeyPress不能触发的问题

    onKeypress---->oninput https://segmentfault.com/a/1190000008820968

  10. LeetCode（95）： 不同的二叉搜索树 II

    Medium! 题目描述: 给定一个整数 n,生成所有由 1 ... n 为节点所组成的二叉搜索树. 示例: 输入: 3 输出: [   [1,null,3,2],   [3,2,null,1],   ...