一、时间选择的种类:

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实践系列③镜像服务Glance

    OpenStack实践系列③镜像服务Glance 3.5 Glance部署 修改glance-api和glance-registry的配置文件,同步数据库 [root@node1 ~]# vim /e ...

  2. windows的tasklist使用

    获取进程信息 tasklist # tasklist |findstr java.exe 杀死进程 方式1,通过进行pid杀死: taskkill /pid 4612 /f 方式2,通过名称杀死: t ...

  3. Django 2.x 常用命令

    从Pycharm换成VsCode,好多命令都不会,这里记一下. 创建 Django 项目 先进入到你想要创建 project 目录下,执行命令 django-admin startproject pr ...

  4. 数字、ip转换python实现

    # 数字 ==> ip # 数字范围[0, 255^4] >>> num2ip = lambda x: '.'.join([str(x/(256**i)%256) for i ...

  5. 锤子科技"临死前"被"接盘" ，内部人士爆料已改签今日头条母公司

    就在昨天,据据锤子科技内部人士透露,部分锤子科技员工在昨天已经接到了相关的临时通知,要求改签劳动合同至今日头条的母公司——字节跳动.至于这是锤子科技真正再度复活还是借尸还魂都不重要,重要的是,作为忠实 ...

  6. Oracle_plsql_开发工具搭建最小化客户端

    一:资源下载获取路径: 二:配置方法 1:前提是安装好plsql开发工具 具体安装步骤略 2:配置 简化版的客户端工具. 具体格式:可以参照下文来修改编写使用. orcl_1521 = (DESCRI ...

  7. Confluence 6 配置数据库查询超时时间

    如果数据库的查询时间太长同时你的应用程序显示没有响应,你可以配置数据库的查询超时时间.在默认情况下 Confluence 没有超时时间.希望配置数据库查询超时时间,在你的测试服务器上进行下面的操作: ...

  8. Confluence 6 用户目录图例 - Confluence 内部目录

    上面的图:Confluence 使用内部目录为用户管理. https://www.cwiki.us/display/CONFLUENCEWIKI/Diagrams+of+Possible+Config ...

  9. RefineDet算法笔记

    ---恢复内容开始--- 一.创新点 针对two-stage的速度慢以及one-stage精度不足提出的方法,refinedet 包括三个核心部分:使用TCB来转换ARM的特征,送入ODM中进行检测: ...

  10. Metasploit框架问题

    1.使用nmap 扫描SMB服务漏洞信息 nmap -P0 --script=smb-check-vulns 10.10.15.123 2.sql语句绕过后台 这部分我待会补充 只有尽可能的过滤,没有 ...