HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改。 
建议:复制下面的代码段,单独建立一个css文件,方便我们修改。

/*  修改日历控件类型 */
::-webkit-datetime-edit { padding: 1px;} /*控制编辑区域的*/
::-webkit-datetime-edit-fields-wrapper { background-color: #fff; } /*控制年月日这个区域的*/
::-webkit-datetime-edit-text { color: #333; padding: 0 .5em; } /*这是控制年月日之间的斜线或短横线的*/
::-webkit-datetime-edit-year-field { color: #333; } /*控制年文字, 如2013四个字母占据的那片地方*/
::-webkit-datetime-edit-month-field { color: #333; } /*控制月份*/
::-webkit-datetime-edit-day-field { color: #333; } /*控制具体日子*/
::-webkit-inner-spin-button { visibility: hidden; } /*这是控制上下小箭头的*/
::-webkit-calendar-picker-indicator { /*这是控制下拉小箭头的*/
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: inset 0 1px #fff, 0 1px #eee;
background-color: #eee;
background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
color: #666;
}
::-webkit-clear-button { /*控制清除按钮*/ }
修改效果,如下图:

效果css代码为:

/*  修改日历控件类型 */
::-webkit-datetime-edit { padding: 1px;color:#6be9ff;background:rgba(0,0,0,0);} /*控制编辑区域的*/
::-webkit-datetime-edit-fields-wrapper { background-color: rgba(0,0,0,0);font-size:18px;line-height:34px;} /*控制年月日这个区域的*/
::-webkit-datetime-edit-text { color: #6be9ff; padding:0; } /*这是控制年月日之间的斜线或短横线的*/
::-webkit-datetime-edit-year-field { background-color: rgba(0,0,0,0);color: #6be9ff; } /*控制年文字, 如2013四个字母占据的那片地方*/
::-webkit-datetime-edit-month-field { background-color: rgba(0,0,0,0);color: #6be9ff; } /*控制月份*/
::-webkit-datetime-edit-day-field { background-color: rgba(0,0,0,0);color: #6be9ff; } /*控制具体日子*/
::-webkit-inner-spin-button { visibility: hidden; } /*这是控制上下小箭头的*/
::-webkit-calendar-picker-indicator { /*这是控制下拉小箭头的*/
//background-image: url("../../img/shuizhi/time_bg.png");
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: inset 0 1px #fff, 0 1px #eee;
background-color: #eee;
background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
color: #666;
margin-right: 10px;
}
::-webkit-clear-button { /*控制清除按钮*/
visibility: hidden;
}
唯一不好的是小三角是不能替换为自己的图片,想要更好的可以用一些时间插件。 相应的相关文章链接:

HTML5中input[type='date']自定义样式&日历校验功能http://blog.csdn.net/leapmotion1/article/details/74909688

伪元素改变date类型input框的默认样式实例页面http://www.zhangxinxu.com/study/201306/pseudo-elements-to-style-type-date.html

 

HTML5中input[type='date']自定义样式的更多相关文章

  1. H5中input[type="date"]默认样式修改 伪类

  2. 【转】html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...

  3. html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...

  4. (网页)HTML中INPUT type="date"标签如何赋值注意问题(转)

    现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...

  5. input[type="radio"]自定义样式

    input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...

  6. html中input type=file 改变样式

    <style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...

  7. html5中如何去掉input type date默认

    html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – ...

  8. html5中input的type类型有哪些(总结)

    html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...

  9. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

随机推荐

  1. 基于windows使用fabric将gitlab的文件远程同步到服务器(本地)

    # -*- coding: utf-8 -*- from fabric.api import env, run, local, put from fabric.operations import su ...

  2. CF1117E Decypher the String

    如果我们能询问一个排列的话,我们就可以得到这个置换,然后反向求解. 但现在字符集只有26. 考虑26^3>1e5. 用一个三维坐标去映射到一个一维整数,然后就可以构造排列了. #include& ...

  3. mac下 配置homebrew 和java home

    1.terminal下输入   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...

  4. hadoopMR自定义输入格式

    输入格式 1.输入分片与记录  2.文件输入  3.文本输入  4.二进制输入  5.多文件输入  6.数据库格式输入 详细的介绍:https://blog.csdn.net/py_123456/ar ...

  5. CRM WEB UI 04明细界面添加按钮

    好了,这个是个人测试玩的,略风骚...请自行鉴阅 1.明细的组件控制器中增加全局控制属性字段: 2.概览页中工具栏相关方法,重定义GET_BUTTONS METHOD IF_BSP_WD_TOOLBA ...

  6. oracle 如何创建只有查询权限的用户

    .create user userName identified by password; .grant select any table to userName; --授予查询任何表 .grant ...

  7. Rest Client插件简单介绍

    一.这插件是做什么的? 快速测试服务的. 和mockmvc功能差不多,可视化操作更直观一点. 如果使用mockmvc漏掉了一个返回值的验证,可能还需要修改再次启动 使用插件的优点是 1.如果服务端没问 ...

  8. Spring注解之@Import

    /** * Indicates one or more {@link Configuration @Configuration} classes to import. * 表示import 一个或多个 ...

  9. hdu多校1002 Balanced Sequence

    Balanced Sequence Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s) ...

  10. Oracle Shared Pool机制之——Latches, Locks, Pins and Mutexes

    本文中,我们将讨论共享池(Shared Pool)中的各种内存保护结构,即Latches,Locks,Pins和Mutexes. 1.  Lathes 当在库缓冲(Libraray Cache)中创建 ...