占位隐藏 html,CSS设置输入框占位符placeholder点击隐藏

在HTML5中可以对文本输入框增加placeholder属性，英文placeholder意思是占位符，用在文本输入框的时候可以友好的显示提示文字，例如下面这个就是常见的文本框提示效果：

对于IE浏览器，该属性支持IE10+版本，低版本的IE将不显示这里的提示文字，在IE10+浏览器里，当鼠标点击搜索框或通过键盘获得焦点时，提示文字自动消失，失去焦点时再次显示。

在Webkit浏览器(Chrome，Opera等)及火狐浏览器中，输入框获得焦点的时候提示文字并不消失，而是在输入内容的时候才消失，和IE浏览器中的表现有细微的差别，但个人认为似乎获得焦点的时候隐藏提示文字比较符合大多数人的习惯，是较好的体验。

在网上看到有网友使用js来隐藏提示文字，事实上CSS就可以设置，对于占位符属性，webkit浏览器和火狐的选择器分别为“::-webkit-input-placeholder”和“::-moz-placeholder”，所以可以有下面的定义：input:focus::-webkit-input-placeholder {

color:#fff;

}

input:focus::-moz-placeholder {

color:#fff;

这里设置了获取焦点时提示文字颜色为白色，对于白色背景来说，也就相当于隐藏了。这里不能使用display来设置隐藏，因为这里是设置元素的一个属性而不是设置元素本身的显示方式。

当然，这里可以使用透明度属性，比如：input:focus::-webkit-input-placeholder {

opacity:0.1;

}

这样设置后，文本框获取焦点时提示文字变成很浅的颜色，也是个不错的效果。如果采用text-indent属性负值的方式，在webkit浏览器有效，在火狐(可能是部分版本)中并不能生效，所以使用透明度属性是最好的。对webkit浏览器和火狐的设置后，文本框提示文字的表现就和IE10+浏览器下基本一致了。

本站站长小泽(英文名: Colin)，80后自由职业者，QQ号为84688099，建立本站的目的是整理学习笔记，分享学习经验，认识更多的朋友。感谢您阅读本站的文章，部分内容参考了网上的一些教程，但我会尽量根据自己的理解写更多原创的东西，本站网址如下：

转载请注明来自：http://www.cssaaa.com/skill/162.html