1、如何去掉input type=date 默认样式

HTML代码:
选择日期:<input type="date" value="2017-06-01" />
选择时间:<input type="time" value="22:52" />
选择星期:<input type="week" />
选择月份:<input type="month" />

目前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 –这是控制清除按钮的

2、去掉input type=number的默认样式

input[type=number] { -moz-appearance:textfield;}
::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} 控制编辑上下箭头的
::-webkit-input-placeholder 控制placeholder样式
:-moz-placeholder
::-moz-placeholder
:-ms-input-placeholder

html5中如何更改、去掉input type默认样式的更多相关文章

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

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

  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. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  5. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  6. 移动端去掉按钮button默认样式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  8. 去掉input[type="number"]的默认样式

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !importa ...

  9. 去掉 input type="number" 在浏览器中遗留的图标样式

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{  /* chrome */     -webkit-appeara ...

随机推荐

  1. 20175213 2018-2019-2 《Java程序设计》第9周学习总结

    教材学习内容总结 根据课本的介绍下载了MySQL和Navicat for MySQL并成功对后者进行破解: 操作方法可分为三步: 一.配置程序--让我们程序能找到数据库的驱动jar包 1.把.jar文 ...

  2. 吴裕雄 python 机器学习——回归决策树模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets from sklearn.model_s ...

  3. Ubuntu iso下载地址(14、16、18)

    Ubuntu镜像,快速下载 ubuntu 14.04: http://mirrors.aliyun.com/ubuntu-releases/14.04/ubuntu 16.04: http://mir ...

  4. Java并发编程之同步

    1.synchronized 关键字 synchronized 锁什么?锁对象. 可能锁对象包括: this, 临界资源对象,Class 类对象. 1.1 同步方法 synchronized T me ...

  5. Android面试准备20190422

    1.即时推送原理,采用的push推送模式,保持一个长连接,服务端和客户端连接后不再断开.所谓长连接,即是在一个TCP上可以连续发送多个数据包,在TCP连接保持期间,如果没有数据包发送,需要双方发送检测 ...

  6. 重温IO

    IO就是输入输出,输出流可以理解为向目标写入数据,输入流可以理解为从源地址读取.流是一组有序的数据序列.   输入流 输出流 字节流 InputStream OutputStream 字符流 Read ...

  7. 在Spring Boot中使用WebClient消费RESTful接口

    转载 https://www.zifangsky.cn/1343.html 参考 https://segmentfault.com/a/1190000012916413

  8. 7.Redis主线程阻塞原因

    7.Redis主线程阻塞原因7.1 发现阻塞7.2 内在原因7.2.1 API或数据结构使用不合理7.2.2 CPU饱和7.2.3 持久化阻塞7.3 外在原因7.3.1 CPU竞争7.3.2 内存交换 ...

  9. github分支规范

    转自:https://www.cnblogs.com/xuld 一.目的 我们制定分支规范,意在实现以下目标: 减少沟通成本:开发者可以很清晰地知道需要修改的代码位于哪个分支. 减少 bug 隐患:避 ...

  10. 跨域的处理方式 JSONP和CORS和反向代理

    什么是跨域? 首先了解同源策略,三个相同,协议,域名端口号相同就是同源,那么三者有任意不同就会造成跨域.跨域不常见,跨域基本上就是访问别人的资源. 如何解决跨域问题? 常见的有三种 一:jsonp处理 ...