标签（input、textarea）placeholder颜色修改

原创于 2023-09-19 14:52:38 发布 · 838 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文详细解释了如何为不同浏览器（WebKit、Edge、Blink、Firefox和IE）正确应用placeholder属性，包括前缀使用规则和不同Firefox版本的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* WebKit,Edge,Blink、 */
input::-webkit-input-placeholder {
	color : red;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
	color : red;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
	color : red;
}
/* Internet Explorer 10-11 */
input:-ms-input-placeholder {
	color : red;
}
/* Microsoft Edge */
input::-ms-input-placeholder {
	color : red;
}

WebKit、Edge、Blink 浏览器以标签类型:开头，带上-webkit-前缀；
火狐浏览器只需要带上-moz-前缀，针对火狐浏览器的版本有两种写法：低版本使用单冒号，高版本使用双冒号；
placeholder属性只在IE10+才支持，IE10、IE11需要以标签类型:开头，带上-ms-前缀；