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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容