写前端的一个input输入框的样式时,需要修改一下 input placeholder属性值字体的颜色,网上查了一下非常的简单,但也要记录一下,方便以后查看。

CSS 设置修改 placeholder 的样式的方法

使用下面的CSS选择器,就可以对指定的输入框 placeholder 属性进行设置!

选择器代码:

input::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
input:-moz-placeholder{}                  /* Firefox版本4-18 */
input::-moz-placeholder{}                  /* Firefox版本19+ */
input:-ms-input-placeholder{}           /* IE浏览器 */

注:placeholder 属性是css3中新增加的属性,IE9以及Opera12以下版本的浏览器不支持!

CSS 设置  placeholder 的样式的示例

示例代码:

<style>
#mo:-moz-placeholder{
color:burlywood;
}
#mo::-moz-placeholder{
color:burlywood;
}
#mo::-webkit-input-placeholder{
color:burlywood;
}
#mo:-ms-input-placeholder{
color:burlywood;
}
</style>
<input type="text" placeholder="飞鸟慕鱼博客">
<hr>
<input type="text" placeholder="飞鸟慕鱼博客" id="mo">

运行效果

,css 修改placeholder颜色