html5 date 样式,input date样式自定义

最新推荐文章于 2024-06-12 21:06:43 发布

rubben peng

最新推荐文章于 2024-06-12 21:06:43 发布

阅读量3.5k

点赞数 1

文章标签： html5 date 样式

一、input date样式自定义

废话不多说直接上代码

CSS代码：

::-webkit-datetime-edit { padding: 1px; background: #000000; } //年月日外边的黑色边框

::-webkit-datetime-edit-fields-wrapper { background-color: #eee; } //年月日的背景

::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; } //text的padding

::-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 date 支持placeholder

因为input date类型不支持placeholder然后我百度搜的时候发现别人的思路就是先把input类型改成text这样就支持placeholder一开始我还觉得挺好用但是后来我发现，需要点击2次input他才能弹出日期选择框，因为首先是text类型只有点击过一次通过JS改变其类型为date，然后在点击才能弹出日期选择。后来我发现这样不行啊，他得点击2次，这样很影响体验。

于是我就自己思考要怎么办，后来想到我可以用CSS伪元素，外边一个DIV然后通过after和before定义文字和小图标，然后通过JS点击input的时候获取到的焦点然后隐藏默认的提示文字，然后把input date这个默认的三角隐藏掉，把input的z-index大于自己设置的小图标就可以了！

最终效果如下

申请日期

代码如下

js代码

$(function () {

//改变placeholder默认提示

$(".date").focus(function () {

$(this).parent().find("span").hide();

})

css代码

.date_box {