用CSS改变placeholder提示字颜色，让你的网站更有个性

前端

2023-02-03 15:38:10

用 CSS 改变占位符提示文字颜色，为您的网站增添个性

个性化定制：网页设计的潮流

在当今数字化的时代，个性化定制已成为一股不可阻挡的潮流。它渗透到了生活的各个领域，包括网页设计。您是否厌倦了浏览器提供的灰色占位符提示文字？是否想要让您的网站与众不同？CSS 可以帮助您实现这一目标！

改变占位符提示文字颜色的方法

改变占位符提示文字颜色是一项简单而有效的方法，可以为您的网站增添个性和活力。按照以下步骤操作即可：

第一步：在 CSS 文件中添加代码

打开您的 CSS 文件，并添加以下代码：

input::-webkit-input-placeholder {
color: #ff0000;
}

input:-moz-placeholder { /* Firefox 18- */
color: #ff0000;  
}

input::-moz-placeholder {  /* Firefox 19+ */
color: #ff0000;  
}

input:-ms-input-placeholder {  
color: #ff0000;  
}

其中，#ff0000 是红色，您可以根据自己的喜好选择其他颜色。

第二步：将 CSS 代码添加到 HTML 文件

现在，将这些 CSS 代码添加到您的 HTML 文件中。您可以将它们添加到头部（head）部分或正文（body）部分。

在头部（head）部分添加 CSS 代码：

<head>
<style>
input::-webkit-input-placeholder {
color: #ff0000;
}

input:-moz-placeholder { /* Firefox 18- */
color: #ff0000;  
}

input::-moz-placeholder {  /* Firefox 19+ */
color: #ff0000;  
}

input:-ms-input-placeholder {  
color: #ff0000;  
}
</style>
</head>

在正文（body）部分添加 CSS 代码：

<body>
<style>
input::-webkit-input-placeholder {
color: #ff0000;
}

input:-moz-placeholder { /* Firefox 18- */
color: #ff0000;  
}

input::-moz-placeholder {  /* Firefox 19+ */
color: #ff0000;  
}

input:-ms-input-placeholder {  
color: #ff0000;  
}
</style>
</body>