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. [转载]EF或LINQ 查询时使用IN并且根据列表自定义排序方法

    原文地址:EF或LINQ 查询时使用IN并且根据列表自定义排序方法作者:李明川 EF和LINQ改变了原有的手写SQL时期的一些编码方法,并且增强了各数据库之间的移植性简化了开发时的代码量和难度,由于很 ...

  2. 20175213吕正宏 MyCP(课下任务,必做)

    一.任务详情: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件( ...

  3. 在docker集群下,使用VNC,物理机器重启后VNC失败解决

    首先重装咯: sudo apt-get update sudo apt-get install ubuntu-desktop gnome-panel gnome-settings-daemon met ...

  4. oralce的function处理考勤时间节点以及计算工作时间

    例如: 上班时间为 8:30 到17:30,加班则到21:00:午休时间为1小时,(12:00-13:00): 晚间休息时间为半小时 (17:30-18:00),计算一批考勤数据的上班时间. 思路: ...

  5. Windows内核驱动中操作文件

    本页主题:如何在windows内核驱动中对文件操作,实现对文件的拷贝.粘贴.删除.查询信息等,这是很常用也是很简单的方法. 部分内容参考:http://www.cppblog.com/aurain/a ...

  6. PDO查询结果中文乱码

    PDO::MYSQL_ATTR_INIT_COMMAND (整数)连接到MySQL服务器时执行的命令.重新连接时会自动重新执行.请注意,此常量只能driver_options 在构建新的数据库句柄时在 ...

  7. LeetCode至 少有 1 位重复的数字

    给定正整数 N,返回小于等于 N 且具有至少 1 位重复数字的正整数. 示例 1: 输入:20 输出:1 解释:具有至少 1 位重复数字的正数(<= 20)只有 11 . 示例 2: 输入:10 ...

  8. mysql数据库优化之 如何选择合适的列建立索引

    1. 在where 从句,group by 从句,order by 从句,on 从句中出现的列: 2. 索引字段越小越好: 3. 离散度大的列放到联合索引的前面:比如: select * from p ...

  9. JVM学习02:GC垃圾回收和内存分配

    JVM学习02:GC垃圾回收和内存分配 写在前面:本系列分享主要参考资料是  周志明老师的<深入理解Java虚拟机>第二版. GC垃圾回收和内存分配知识要点Xmind梳理 案例分析1-(G ...

  10. 【LeetCode刷题系列 - 002题】Add Two Numbers

    题目: You are given two non-empty linked lists representing two non-negative integers. The digits are ...