如何更改input中placeholder的颜色
示例:更改前:更改后:在我们经常写input时,我们一般都是使用placeholder的颜色,但是看起来真的很戳,当美工给我们设计了一个精美的input背景时,placeholder的内容就很难看清楚,我们就要对其进行更改颜色。但是我们对input的color更改成其它颜色时,只会对input输入的内容进行赋值颜色,而placeholder还是默认颜色。我们可以这样对它...
·
示例:
更改前:
更改后:
在我们经常写input时,我们一般都是使用placeholder的颜色,但是看起来真的很戳,当美工给我们设计了一个精美的input背景时,placeholder的内容就很难看清楚,我们就要对其进行更改颜色。
但是我们对input的color更改成其它颜色时,只会对input输入的内容进行赋值颜色,而placeholder还是默认颜色。
我们可以这样对它控制:
<style>
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
</style>
针对不同版本和浏览器时会有不同的写法,需要添加相应的后缀
注意:
1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号,写的时候还要带上input
2、针对火狐浏览器则有两种写法,一种是针对低版本的,一种是针对高版本的,二者都需要带上-moz-前缀。要点1:火狐低版本的使用冒号(:),而高版本的使用双冒号(::);要点2:火狐浏览器不需要像webkit内核那样要带上input。
3、由于placeholder属性只在IE10+才支持,因此,针对IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input
特别强调:冒号与双冒号的问题,还有是否需要加上input
更多推荐
已为社区贡献1条内容
所有评论(0)