CSS 中修改 input 元素中的占位符placeholder文本颜色

在 HTML 中，一个表单元素（如 input 或 textarea）的占位符是指在用户未输入内容时显示出来的灰色文本。在 CSS 中，可以通过 ::placeholder 伪元素来样式化占位符文本。

下面是一个简单的例子，将 input 元素中的占位符文本颜色修改为红色：

input::placeholder {
  color: red;
}

上述代码中，input::placeholder 表示选中 input 元素中的占位符文本，color: red 则表示将其颜色修改为红色。

如果想要修改占位符文本的字体大小、字体样式等属性，也可以像样式化普通文本一样，直接应用于 ::placeholder，例如：

input::placeholder {
  font-size: 14px;
  font-style: italic;
}

在这个例子中，占位符文本将以 14 像素字体大小和斜体字体样式显示。

需要注意的是，不同浏览器对 ::placeholder 的支持程度有所不同，有些浏览器可能只支持部分 css 属性的设置。为了确保样式能够在各种浏览器中有效，可以在样式表中同时使用 ::placeholder 和 -webkit-input-placeholder、-moz-placeholder 或 -ms-input-placeholder 等其他前缀形式的选择器，例如：

/* 标准语法 */
input::placeholder {
  color: red;
}
/* 兼容性写法 */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
  color: red;
}

上述代码中，-webkit-input-placeholder、-moz-placeholder 和 -ms-input-placeholder 分别表示 Webkit、Gecko 和 Microsoft Edge 浏览器中的占位符文本设置。同时使用多个前缀写法可以确保在兼容各种浏览器时都能正常显示样式。