怎么让html的标签失去效果,使用HTML5标签属性type="date"时placeholder属性失效无法使用如何解决...

本篇教程探讨了使用HTML5标签属性type="date"时placeholder属性失效无法使用如何解决，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

最近使用到了html5的一个新标签属性,type="date"时，发现placeholder属性失效无法使用。

如果是这样的效果，那么客户体验是可想而知的差了。

最后想了一下，想到用css+js双保险来搞定它。

方法1：

css：

input[type="date"]:before{

content: attr(placeholder);//强制给placeholder属性

color:#aaa;// 这种灰色应该是最适合的

}

做到这一步还不行，因为当输入框有值之后，placeholder还是不能隐藏消失。

现在是js登场了。

方法2：

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不设置高度的话在安卓下会placeholder 跟date 同时显示 而且显示两行, 限制高度加overflow即可解决.

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！