CSS设置input placeholder文本的样式

placeholder是HTML5  input的新属性，英文意思是占位符，它一般表示input输入框的默认提示值。

当然我们今天讨论的不是placeholder这个属性，而是设置placeholder的文本样式的选择器。

实例demo

火狐和webkit核心浏览器的属性名字不一样，谁叫不是一个娘生的呢。

• /* webkit 浏览器*/
• #field1::-webkit-input-placeholder { color:#00f; }
• #field2::-webkit-input-placeholder {
• color:#090;
• background:lightgreen;
• text-transform:uppercase;
• }
• #field3::-webkit-input-placeholder {
• font-style:italic;
• text-decoration:overline;
• letter-spacing:3px;
• color:#999;
• }
• /* 火狐浏览器 */
• #field1::-moz-placeholder { color:#00f; }
• #field2::-moz-placeholder {
• color:#090;
• background:lightgreen;
• text-transform:uppercase;
• }
• #field3::-moz-placeholder {
• font-style:italic;
• text-decoration:overline;
• letter-spacing:3px;
• color:#999;
• }

当然，和CSS设置::selection选中文本样式一样，你只能设置几个和文本有关系的CSS样式：Color, font-style, font-varian, background, text-decoration
实例demo

PS：IE从IE 10才开始支持placeholder属性，伪选择器名字还不得而知，估计是加前缀-ms-了