网上找的方法苹果可以了 安卓显示总有问题.
加了段CSS就完美解决了,就是UC有点奇葩
以下是我测试的浏览器:
微信--OK.
QQ浏览器--OK
谷歌浏览器--OK
UC浏览器(业界奇葩),前面会有空白
css
input[type="date"]:before{
color:#A9A9A9;
content:attr(placeholder);
}
input[type="date"].full:before {
color:black;
content:""!important;
}
js
$("#date").on("input",function(){
if($(this).val().length>0){
$(this).addClass("full");
}
else{
$(this).removeClass("full");
}
});
html
<input id="date" class="weui_input" type="date" placeholder="请选择出生日期" style="height:41px;overflow: hidden;">
这里说明一下, input不设置高度的话在安卓下会placeholder 跟date 同时显示 而且显示两行, 限制高度加overflow即可解决.