CSS代码:
::-webkit-datetime-edit { padding: 1px; background: url(/study/image/selection.gif); }
::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }
::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-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;
}
HTML代码:
<input type="date" />

伪元素改变date类型input框的默认样式实例页面的更多相关文章

  1. 消除input框的默认样式

    input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...

  2. file类型input框设置上传相同文件,并都可以触发change事件。

    在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...

  3. 在vue组件的stylus样式总 取消search类型的input按钮中默认样式

    在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...

  4. input框的默认bug解决办法

    input框的默认bug是在没干掉边框的情况下是不能设置背景颜色的,否则边框会变成内边框(黑色)效果,很难看. 解决办法是: none掉input框的边框:border:none; 再设置其背景色为任 ...

  5. 用纯css改变下拉列表select框的默认样式(转)

    用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息.     在这 ...

  6. HTML复选框checkbox默认样式修改

    此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...

  7. input时间表单默认样式修改(input[type="date"])

    一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...

  8. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  9. CSS效果:CSS改变下拉列表select框的默认样式

    原理 原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可.当然右侧的小箭头可以用伪元素before或者after来实现. select { /*Chrome和Fir ...

随机推荐

  1. SpringMVC 接收表单数据的方式

    1.@RequestParam @RequestMapping(value = "/xxxx.do") public void create(@RequestParam(value ...

  2. Python代码的编译

    Python代码的编译 Python代码在解释执行之前,是会被编译成.pyc或者.pyo文件的,它们是中间字节码表示的文件,之后Python虚拟机才会去解释执行它们. 1.pyc文件 ======== ...

  3. QQ、邮箱、手机号 正则验证

    邮箱:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ 手机号:/^(((13[0-9]{1})|(15[0-9]{1 ...

  4. 外网访问vmvare

    使用端口映射即可,以tplink wr886n为例, 方法如下: 1.打开浏览器,输入默认ip192.168.0.1回车登录: 2.登录对话框,输入 密码点击确定: 3.点击转发规则--虚拟服务器,点 ...

  5. 08-Location总结图解

    URI解析  首先要判断有没有精准匹配,能不能精准匹配.计算机里面没有什么这种差不多这种东西.跟人聊天才说差不多,最近过得怎么样啊,还行吧,差不多吧,这个不多是多还是不多啊. 预定义库->Gen ...

  6. java 解析xml(dom4j.jar)

    先导入jar包 <?xml version="1.0" encoding="UTF-8"?> <companys> <compan ...

  7. SpringMVC Controller 的简单应用

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  8. js精度(摘)

    Math.formatFloat = function (f, digit) {    var m = Math.pow(10, digit);    return parseInt(f * m, 1 ...

  9. SpringMVC——处理 JSON:使用 HttpMessageConverter

    一.SpringMVC处理JSON流程 1. 加入 jar 包: jackson-annotations-2.1.5.jarjackson-core-2.1.5.jarjackson-databind ...

  10. Robot Framework - 基础关键字 BuiltIn 库(一)

    今天给大家分享的是Robot Framework 机器人框架中 BuiltIn 基础库的使用...BuiltIn 库里面提供了很多基础方法助力于我们在自动化测试领域中做的更好!——本系列教程是教会大家 ...