如何更改占位符颜色 - CSS

占位符是表单输入框中灰色的文本提示或默认值。在CSS中，我们可以通过以下几种方式更改占位符的颜色：

1. 使用 ::placeholder 伪元素

使用 ::placeholder 伪元素，我们可以选择所有占位符元素，然后添加相应的样式：

::placeholder {
  color: red;
}

2. 使用 :placeholder-shown 伪类

使用 :placeholder-shown 伪类，我们可以选择所有已显示占位符的输入框，然后添加样式：

input:placeholder-shown {
  color: blue;
}

3. 使用 :-moz-placeholder 伪元素和 :-ms-input-placeholder 伪元素

有些浏览器（如 Firefox 和 Internet Explorer）不支持 ::placeholder 伪元素，但支持 :-moz-placeholder 伪元素和 :-ms-input-placeholder 伪元素，所以我们需要添加这两个伪元素的样式：

::-moz-placeholder {
  color: green;
}

:-ms-input-placeholder {
  color: purple;
}

4. 使用 ::-webkit-input-placeholder 伪元素

某些浏览器使用 ::-webkit-input-placeholder 伪元素来支持占位符，所以我们需要添加相应的样式：

::-webkit-input-placeholder {
  color: orange;
}

以上是四种常用方式，可以根据需要灵活运用。

参考资料：MDN Web Docs