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. wordpress get_query_var()函数

    get_query_var函数的最主要作用就是能够查询得到当前文章的分类及分页.定义在:wp-includes/query.php 定义: function get_query_var($var) { ...

  2. Spring Cloud Eureka 3 (Eureka client注册服务提供者)

    在完成服务注册中心的搭建后我们来尝试下将一个既有的spring boot应用加入eureka的服务治理体系中 新建一个spring boot项目加入eureka client依赖 这里加入的eurek ...

  3. java tcp socket实例

    java tcp socket实例 2011-04-20 13:58 2364人阅读 评论(1) 收藏 举报 socketjavatcpthreadserverclass package com.ne ...

  4. php 数据导出csv 注意问题。

    总共10W数据每次下载到9.5W就停了. 加上这个就好了 ini_set('memory_limit','512M'): //脚本运行无时间限制. set_time_limit(0); 要设置一个se ...

  5. id 和 instancetype 方法的区别

    首先明确 id 和 instancetype 都是万能指针,都能指向一个对象:(instancetype == id == 万能指针 == 指向一个对象) 主要区别亮点: 1. id 在编译时候不能判 ...

  6. 浅析junit4及扩展实践

    junit框架相关源代码分析,网上已经有很多了,本篇不做过多相关解说,主要还是要自己多读相关源代码.本篇主要对自动化测试过程相关的测试用例,测试数据,测试结果结合junit做相关扩展说明. 如果要解读 ...

  7. C++之shared_ptr总结

    转自 http://blog.csdn.net/u013696062/article/details/39665247 Share_ptr也是一种智能指针.类比于auto_ptr学习.所以推荐先学习a ...

  8. SQLAlchemy(ORM框架)

    SQLAlchemy SQLAlchemy概述 2 3 4 5 6 7 8 9 10 11 12 13 MySQL-Python     mysql+mysqldb://<user>:&l ...

  9. postfix配置积累(不断的积累)

    postfix 配置 1.mail_name 默认是Postfix.在收件人信头可以查看,如果不想让别人知道你是用postfix发的,则可以改成其它名字,如:postconf -e mail_name ...

  10. 997D Cycles in product

    传送门 题目大意 https://www.luogu.org/problemnew/show/CF997D 分析 我们发现两棵树互不相关 于是我们可以分别求出两棵树的信息 我们点分,人啊按后设f[i] ...