html5中去掉input type date默认样式的方法
发布时间:2018-09-06 14:53:16 作者:佚名 我要评论
这篇文章主要介绍了html5中去掉input type date默认样式的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
html5中如何去掉input type date默认样式,下面通过本文给大家详细介绍,具体介绍如下所示:
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; }
总结
以上所述是小编给大家介绍的html5中去掉input type date默认样式的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持!
相关文章
HTML5 input新增type属性color颜色拾取器的实例代码
type 属性规定 input 元素的类型。本文较详细的给大家介绍了HTML5 input新增type属性color颜色拾取器的实例代码,感兴趣的朋友跟随程序员之家小编一起看看吧2018-08-27HTML5中input[type='date']自定义样式与日历校验功能的实现代码
HTML5提供了日历控件功能,缩减了开发时间,但是有些地方也不是很好,下面给大家分享一段代码片段关于HTML5中input[type='date']自定义样式与日历校验功能,需要的的朋友参2017-07-11关于input type="file"的及其files对象的深度解析
我们都知道,html5中有个input type=file元素,用该元素可以实现页面上传文件的功能,这篇文章主要介绍了关于input type="file"的及其files对象的深层解析,需要2023-07-13
最新评论