css设置input placeholder文本框样式

发布时间:2020-08-29编辑:脚本学堂
本文介绍了css设置input placeholder文本样式的方法,设置placeholder文本样式选择器的方法,需要的朋友参考下。

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

这里讨论下设置placeholder文本样式选择器的方法,一起来看看中。

例子,注意火狐和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

备注:
ie从ie10才开始支持placeholder属性,伪选择器名字还不得而知,估计是加前缀-ms-了。