placeholder 是输入框为空且未获焦点时显示的提示文字，可用 ::placeholder 伪元素统一设置样式，现代浏览器均支持，无需兼容旧前缀；其显示逻辑为自动隐藏于聚焦或输入后，不可用 JS 直接操作文本内容。

输入框未填写时显示的提示文字，就是 placeholder，用 ::placeholder 伪元素就能精准控制它的样式，而且兼容性足够好（Chrome、Firefox、Safari、Edge 均支持）。

基础写法：统一设置 placeholder 样式

直接对 input 或 textarea 使用 ::placeholder 即可：

input::placeholder,
textarea::placeholder {
  color: #999;
  font-size: 14px;
  font-style: italic;
}

处理不同浏览器前缀（实际已基本不用）

现代浏览器已统一支持标准 ::placeholder，但若需兼容极老版本（如 Chrome 49–56、Firefox 19–50），可加前缀：

• ::-webkit-input-placeholder（旧版 WebKit）
• ::-moz-placeholder（旧版 Firefox，透明度失效）
• :-ms-input-placeholder（IE10–11）

不过现在项目中，只写标准 ::placeholder 就够用了，打包工具或 autoprefixer 通常也不再补这些。

注意 placeholder 的显示逻辑

它只在输入框为空且未获得焦点时显示；一旦用户点击（focus）或输入内容，就会自动隐藏。不能用 JS 直接操作 placeholder 文本，但可通过 input.placeholder = "新提示" 动态修改。

如果想“始终显示提示”，那不属于 placeholder 职责——应改用浮动标签（floating label）或外部 + JS 控制显隐。

小技巧：让 placeholder 更友好

• 颜色别太浅（如 #ccc），建议不低于 #777，保证可读性
• 避免用纯灰色配灰色边框，容易被忽略
• 可加 opacity: 0.8 微调，比单纯改色更柔和
• 不要给 placeholder 设置 font-weight: bold，语义上它是辅助信息，不是强调内容

基本上就这些。用好 ::placeholder，不复杂但容易忽略细节。