html5 date 样式,input 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 {

width: 430px;

height: 45px;

margin:0 100px 20px 0;

position: relative;

}

.date_box:after{

cursor: pointer;

content:''; position:

absolute; z-index: 1;

top: 12px;

right: 0px;

width:18px;

height: 18px;

background: url(uploads/image/20191119/1574127193.png) no-repeat -189px -67px;

}

.date_box span{

position: absolute;

padding-left:19px;

margin-left:1px;

z-index: 1;

top: 10px;

color: #959595;

font-size: 16px;

left: 0px;

width: 150px;

height: 30px;

background: #ffffff;

}

.date_box input {

border: 1px solid #E5E5E5;

color: #959595;

padding: 0 15px;

font-size: 16px;

border-radius:8px;

width: 430px;

height: 45px;

}

.date::-webkit-inner-spin-button {

visibility: hidden;

}

.date::-webkit-calendar-picker-indicator {

cursor: pointer;

position: relative;

z-index: 999;

margin-right:-15px;

width:50px;

height: 45px;

background: #000000;

opacity: 0;

}

html代码

申请日期

三、layui的日期插件

虽然自己想了个方法二，但是IE兼容不太友好，而且Microsoft Edge用input date自带的日期选择是真滴好二。所以，强烈推荐自己以后直接用layui节约时间！！！