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）或外部 <label></label> + JS 控制显隐。
小技巧：让 placeholder 更友好
- 颜色别太浅（如
#ccc），建议不低于#777，保证可读性 - 避免用纯灰色配灰色边框，容易被忽略
- 可加
opacity: 0.8微调，比单纯改色更柔和 - 不要给 placeholder 设置
font-weight: bold，语义上它是辅助信息，不是强调内容
基本上就这些。用好 ::placeholder，不复杂但容易忽略细节。
