input type date 解决移动端显示placeholder.

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

input type date 解决移动端显示placeholder.

推荐阅读更多精彩内容