CSS修改placeholder颜色的方法

Monkey、

已于 2023-06-30 16:59:27 修改

阅读量6.6k

点赞数 2

文章标签： css 前端

于 2023-06-30 16:58:04 首次发布

本文链接：https://blog.csdn.net/u011884200/article/details/131480238

版权

文章介绍了placeholder是输入框的提示文字，用于引导用户输入。使用CSS3的::placeholder伪类可以改变其颜色，例如将颜色设为绿色。但应注意此方法在IE浏览器中不兼容，可借助jQuery等JavaScript库解决兼容性问题。

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

一、什么是placeholder

placeholder是一种输入提示，是指在输入框中出现的提示文字，它可以提示用户输入的内容，方便用户输入。

二、CSS修改placeholder颜色的方法

CSS修改placeholder颜色的方法主要是利用CSS3中新增的::placeholder伪类，它允许我们对输入框的placeholder文字进行定制，比如改变文字的颜色、大小等。

<html>
<head>
    <title>test</title>
    <meta charset="UTF-8"/>
    <style>
        #input1::placeholder{
            color: green;
        }
    </style>
</head>
<body>
<input id="input1" placeholder="请输入名字">
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/aefe3d8b470c4bb29f813da1d60c633b.png

三、兼容性

CSS3中的::placeholder伪类目前只有部分浏览器支持，比如Chrome、Firefox、Opera等，IE不支持，因此，在使用的时候，需要注意兼容性问题。

另外，如果需要兼容IE，可以使用jQuery等JS库，通过JS来改变placeholder文字的颜色，以达到同样的效果。