1508132785(1).png
网上找的方法苹果可以了 安卓显示总有问题.
加了段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;">
<div class="sst"> sdsd </div>
<style>
.sst{width: 300px; height: 300px; line-height:300px; text-align: center; border: 1px solid red;
opacity: 0.7; background: #FF0000; color: #FFFFFF; filter:alpha(opacity=70); }
</style>
这里说明一下, input不设置高度的话在安卓下会placeholder 跟date 同时显示 而且显示两行, 限制高度加overflow即可解决.
补充说明一下 ：
在实际的工作中 时间一般都是后台添加的 这里就会出现一下问题 placeholder属性和时间（2017-12-09） 这些就会混在一起，因为不是用户自己手动选入的
解决方案： 要后台哥 在填充时间时 在清空一下 placeholder：“” 一下就可以了
CSS opacity的兼容写法
.sst{width: 300px; height: 300px; line-height:300px; text-align: center; border: 1px solid red; opacity: 0.7; background: #FF0000; color: #FFFFFF; filter:alpha(opacity=70); }
去除移动端的滚动条
::-webkit-scrollbar{width:0;height:0;}
原网址：http://blog.csdn.net/lz305263/article/details/51189241
http://www.webhek.com/post/demo/css-selection
