html5中如何去掉input type date默认样式

1.时间选择的种类:

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

2.对日期时间控件的样式进行修改

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

以下的囊括了date,datetime,week,time所用的伪元素: 
input::-webkit-datetime-edit{} 
input::-webkit-datetime-edit-fields-wrapper{} 
input::-webkit-datetime-edit-ampm-field{} 
input::-webkit-datetime-edit-day-field{} 
input::-webkit-datetime-edit-hour-field{} 
input::-webkit-datetime-edit-millisecond-field{} 
input::-webkit-datetime-edit-minute-field{} 
input::-webkit-datetime-edit-month-field{} 
input::-webkit-datetime-edit-second-field{} 
input::-webkit-datetime-edit-week-field{} 
input::-webkit-datetime-edit-year-field{} 
input::-webkit-datetime-edit-ampm-field:focus{} 
input::-webkit-datetime-edit-day-field:focus{} 
input::-webkit-datetime-edit-hour-field:focus{} 
input::-webkit-datetime-edit-millisecond-field:focus{} 
input::-webkit-datetime-edit-minute-field:focus{} 
input::-webkit-datetime-edit-month-field:focus{} 
input::-webkit-datetime-edit-second-field:focus{} 
input::-webkit-datetime-edit-week-field:focus{} 
input::-webkit-datetime-edit-year-field:focus{} 
input::-webkit-datetime-edit-year-field[disabled]{} 
input::-webkit-datetime-edit-month-field[disabled]{} 
input::-webkit-datetime-edit-week-field[disabled]{} 
input::-webkit-datetime-edit-day-field[disabled]{} 
input::-webkit-datetime-edit-ampm-field[disabled]{} 
input::-webkit-datetime-edit-hour-field[disabled]{} 
input::-webkit-datetime-edit-millisecond-field[disabled]{} 
input::-webkit-datetime-edit-minute-field[disabled]{} 
input::-webkit-datetime-edit-second-field[disabled]{} 
input::-webkit-datetime-edit-text{} 
input::-webkit-inner-spin-button{} 
input::-webkit-calendar-picker-indicator{} 
input::-webkit-calendar-picker-indicator:hover{}

date类型改变行高和高度那个小三角并不会根据大小调整,实在太丑了,所以决定把它隐藏掉。 
下面的css可以去掉date中上下小三角,但是保留input类型为number的小三角。 
input[type=date]::-webkit-inner-spin-button { visibility: hidden; } 
input类型为date的输入框有以下属性,可以根据自己的需求自行调整。 
::-webkit-datetime-edit { padding: 1px; background: url(../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; 
}

例子

日期<input type="date" id="date" />
  • 1

去掉上下箭头按钮则需要对date默认样式进行修改在样式中添加

<style>
input[type=date]::-webkit-inner-spin-button { visibility: hidden; }
</style>
  • 1
  • 2
  • 3则日期样式改为: 

转载自:https://blog.csdn.net/sanshipianyezi/article/details/72837150

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

  1. 【转】html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...

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

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

  3. H5中input[type="date"]默认样式修改 伪类

  4. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  5. input[type='file']默认样式

    <input type="file" name="" id="" value="" /> 当input的ty ...

  6. html5中如何更改、去掉input type默认样式

    1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" ...

  7. (网页)HTML中INPUT type="date"标签如何赋值注意问题(转)

    现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...

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

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

  9. <input type="date">设置默认当前日期

    日期选择器如下: <input type="date" id="start_date" name="start_date"> 注 ...

随机推荐

  1. 2.14 Java web 复习总结

    1.空指针异常原因(NullPointerExceptio)之一: 在Dao层里边 声明 Connection conn = DBUtil.getConn(); //不能少 Statement sta ...

  2. 开源DDD设计模式框架YMNNetCoreFrameWork第6篇-.net Core Logging和Nlog结合

    源码地址:https://github.com/topgunymn/YMNNetCoreFrameWork 遇到的坑:使用了Nlog以后,.NETcore自带的日志等级不起作用,只有nlog配置配置文 ...

  3. 088-PHP数组运用 - 通过循环函数过滤部分数组

    <?php function myfunc(&$arr){ //自定义一个过滤函数 $j=count($arr); for($i=0;$i<$j;$i++){ if($arr[$i ...

  4. Sklearn K均值聚类

    ## 版权所有,转帖注明出处 章节 SciKit-Learn 加载数据集 SciKit-Learn 数据集基本信息 SciKit-Learn 使用matplotlib可视化数据 SciKit-Lear ...

  5. 找《飘》 中最常用的N个单词。

    找<飘> 中最常用的N个单词. 1,题目:输出单个文件(<飘> 英文版)中的前 N 个最常出现的英语单词,并将结果输入到文本文件中. 2,设计思路: 1),按行依次读取文件并按 ...

  6. HDU - 4576 Robot(概率dp+滚动数组)

    题意:所有的格子围成一个圈,标号为1~n,若从格子1出发,每次指令告知行走的步数,但可能逆时针也可能顺时针走,概率都是1/2,那么问走了m次指令后位于格子l~r(1≤l≤r≤n)的概率. 分析: 1. ...

  7. cmake的find_package()简单总结

    遇到的问题 find_package(lzb)出现错误如下: CMake Warning at CMakeLists.txt:37 (find_package): By not providing & ...

  8. swift中实现cell中局部播放的动画效果

    在cell中 // 播放器动画效果 private var replicatorLayer:ReplicatorLayer = { let layer = ReplicatorLayer.init(f ...

  9. URAL_1018 Binary Apple Tree 树形DP+背包

    这个题目给定一棵树,以及树的每个树枝的苹果数量,要求在保留K个树枝的情况下最多能保留多少个苹果 一看就觉得是个树形DP,然后想出 dp[i][j]来表示第i个节点保留j个树枝的最大苹果数,但是在树形过 ...

  10. Adaboost的python实现

    不要总是掉包欧,真的丢人啊,一起码起来! '''函数的功能:单层决策树分类函数参数说明: xMat:数据矩阵 i:第i列,第几个特征 Q:阈值返回分类结果: re'''import numpy as ...