css设置placeholder的样式

/* 设置placeholder的颜色 */
::placeholder {
  color: #999;
}

/* 设置特定输入框的placeholder样式 */
input[type="text"]::placeholder {
  color: #ccc;
  font-style: italic;
}

/* 设置不同浏览器的兼容性 */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #999;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: #999;
  opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #999;
  opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
}

解释说明：

1. 通用样式：::placeholder 是 CSS3 中用于设置所有浏览器中 placeholder 样式的伪元素。
2. 特定输入框样式：通过选择器（如 input[type="text"]::placeholder）可以为特定类型的输入框设置不同的 placeholder 样式。
3. 浏览器兼容性：为了确保在不同浏览器中都能正确显示 placeholder，需要针对不同浏览器内核添加特定的伪类选择器。例如，::-webkit-input-placeholder 适用于基于 WebKit 和 Blink 的浏览器（如 Chrome 和 Safari），::-moz-placeholder 适用于较新版本的 Firefox 等。