在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能。。。
示例
<form action="demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="我是提示文字 在此输入文本我会消失" />
<input type="submit" />
</form>
根据浏览器的不同,效果也不同。
有些会在鼠标focus文本框时,文字直接消失。
有些则会在输入文本时消失。
占位文本颜色设置如下
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}