CSS 修改input中的placeholder默认颜色

你好像很好吃a

已于 2024-05-22 10:24:26 修改

阅读量5.8w

点赞数 17

分类专栏： CSS 文章标签： css 前端

于 2019-12-05 16:30:15 首次发布

本文链接：https://blog.csdn.net/weixin_44296929/article/details/103406696

版权

CSS 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用CSS的input-placeholder属性来改变HTML输入框中placeholder文本的默认颜色，包括修改页面所有或特定input的placeholder颜色的方法，并提供兼容不同浏览器内核的前缀示例。

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

使用 input-placeholder 属性来修改placeholder的默认颜色：

1、说明：placeholder是input框中的提示文字，默认是灰色的，而color是修改input中用户输入文本的颜色，通过color属性是不能修改placeholder颜色的，我们要想修改placeholder的默认颜色可以使用CSS提供的input-placeholder属性。

2、修改页面所有input中placeholder颜色的语法：（直接写在<style></style>标签下）

input::input-placeholder{
	color:red;
}

3、修改页面某一个input的placeholder颜色的语法：（直接写在<style></style>标签下）

选中元素::input-placeholder{
	color:red;
}

3、例子：

1）首先我们新建两个input值：

<input type="text" class="input1" placeholder="请输入收货地址" />
<input type="text" class="input2" placeholder="请输入收货地址" />

2）同时修改两个input内的placeholder颜色：（相当于使用标签选择器选中input元素）

input::input-placeholder{
	color:red;
}

3）见效果：
在这里插入图片描述
4）单独修改class为input2的input的placeholder属性颜色：

.input2::input-placeholder{
	color:red;
}

说明：这里使用class选择器（也可以使用其它的选择器）选中第二个input使用::（双冒号）分隔，后接input-placeholder属性即可。

5）见效果：
在这里插入图片描述
4、为了兼容不同的浏览器内核：我们要添加不同的前缀：（平时开发的时候需要都添加上）

input::input-placeholder{
	color: red;
}
input::-webkit-input-placeholder{	//兼容WebKit browsers（Chrome的内核）
	color: red;
}
input::-moz-placeholder{			//Mozilla Firefox 4 to 18
	color: red;
}
input::-moz-placeholder{			//Mozilla Firefox 19+
	color: red;
}
input::-ms-input-placeholder{		//Internet Explorer 10+
	color: red;
}