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. How to Change Master Page @ Run-time

    This tip will give complete knowledge of how to change master page, render controls and accessing it ...

  2. 华为部分真机调试无法显示log问题解决

    真机测试时,部分华为手机无法获取全部的log信息.或者说无法获取Error以下级别的log信息.比如P7 这是因为部分华为机出厂默认log设置为关闭状态,因此只能获取Error以上级别的log信息.蛋 ...

  3. MVC,MVP 和 MVVM 的详解

    一.MVC MVC模式的意思是,软件可以分成三个部分. 视图(View):用户界面. 控制器(Controller):业务逻辑 模型(Model):数据保存 各部分之间的通信方式如下. View 传送 ...

  4. Unity ios、android、pc一键打包(一)

    http://www.cnblogs.com/miaoshujiang/p/5289223.html http://blog.csdn.net/ynnmnm/article/details/36774 ...

  5. SpringCloud03 Ribbon知识点、 Feign知识点、利用RestTemplate+Ribbon调用远程服务提供的资源、利用feign调用远程服务提供的资源、熔断

    1 远程服务资源的调用 1.1 古老的套路 在微服务出现之前,所有的远程服务资源必须通过RestTemplate或者HttpClient进行:但是这两者仅仅实现了远程服务资源的调用,并未提供负载均衡实 ...

  6. solr第一天 基础增删改查操作

    全文检索技术   Lucene&Solr               Part2 1 课程计划 1.索引库的维护 a) 添加文档 b) 删除文档 c) 修改文档 2.Lucene的查询 a)  ...

  7. dataframe 用法总结

    http://pda.readthedocs.io/en/latest/chp5.html data = [] 列表初始化 data = (,) data = {} 字典初始化 data = pd.D ...

  8. ESP8266-iot-简介1

    ESP8266简介

  9. Oracle数据库之单表查询

    接着上一篇的分享,今天主要给大家分享的是关于数据中的单表查询,单表查询很基础,也很重要,但是任何一个初学者必须要掌握的姿势,单表查询就是对单个表进行操作,查询我们想要的数据.单表查询里面的内容也是比较 ...

  10. 【Android学习】Android编码规范

    四种常见的命名法 比较Java和c#的命名规范的不同点 常量用大写 java方法首字母不大写,应该小写 函数行数限制 不要用拼音 参照物,Android源码 看源码工具,SourceInsight 和 ...