html5新特性--表单input新属性placeholder

placeholder 属性提供一种提示（hint），描述输入域所期待的值。设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。

 

默认提示文字是灰色的，可以通过CSS来改变文字样式：（不过不同的浏览器设置不同哦~）

 

 

//ff下系统表单样式会被覆盖，因此会改变提示文字的颜色。Chrome和Opera则不会
input { color: red; }
<label for="name">姓名:</label>
<input id="name" type="name" placeholder="在此输入您的姓名"  />

 

 

1.根据选择器优先级（http://wangjingyi.iteye.com/blog/1447077）可以知道：

标签+伪类选择器的优先级要高于单纯的标签选择器。但是ff这里出现了一点小特殊，所以设置的时候直接添加

 

input { color: red; }

如果不想更改默认的灰色颜色只需要使用css再次覆盖下就哦了。

 

input { color: red; }
input:-moz-placeholder { color: gray; }

 

 

 

2.Chrome和Opera想要修改默认提示文字的颜色

尝试添加input { color: red!important; }仍未改变默认颜色。

Chrome需要按照如下设置：

 

 

::-webkit-input-placeholder { color:blue; }
input:-moz-placeholder { color:blue; }

 

 目前到Opera11不支持自定义提示文字的颜色。

 

 

 

扩展：http://seavers.iteye.com/blog/1078292

 

 

HTML5 placeholder实际应用经验分享及拓展：

http://www.zhangxinxu.com/wordpress/2012/02/html5-placeholder%E4%BD%BF%E7%94%A8%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB%E5%8F%8A%E6%8B%93%E5%B1%95/

 

评论

1 楼 zhangyaochun 2012-03-31  

很详细，不同的应用场景以及扩展的学习