当然我们今天讨论的不是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-了