如何使用 CSS 更改占位符属性的颜色？

要使用 CSS 更改占位符属性的颜色，我们将使用 ::placeholder 伪元素来更新占位符的默认颜色。

在这篇文章中，我们有一个带有默认占位符颜色的文本 type 输入字段，我们的任务是使用 CSS 更改占位符属性的颜色。

更改占位符颜色的步骤

  • 我们使用 input 标签创建了一个输入字段，并使用 label 标签定义了输入字段。
  • 然后，我们使用 ::placeholder 伪元素选择器来选择占位符，并使用 CSS color 属性更改其颜色。

示例

这是一个完整的示例代码，实现了上述步骤，使用 placeholder 伪元素更改占位符属性的颜色。

<!DOCTYPE html>
<html>
<head>
   <style>
      ::placeholder {
         color: #04af2f;
      }
   </style>
</head>
<body>
    <h3>
        Changing Placeholder Color with CSS
    </h3>
    <p>
        In this example we have used <strong>::placeholder
        </strong> pseudo-element to change the placeholder
        Color with CSS.
    </p>
    <label for="example">Enter your name: </label>
    <input type="text" id="example" 
           placeholder="Tutorialspoint"/>
</body>
</html>

结论

使用 CSS 更改占位符属性的颜色是一个非常简单的过程，可以使用 CSS ::placeholder 伪元素选择器实现。在这篇文章中，我们讨论了一个非常简单的示例来更改占位符颜色。

更新于: 2024-09-11

3K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告