CSS设置input placeholder文本的样式

时间:2021-04-16

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

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

  实例demo

  火狐和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-了。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章