应使用 rgba(0, 0, 0, 0.4) 类透明度控制提示文字视觉层级，label 用 rgba(0,0,0,0.65)，placeholder 用 rgba(0,0,0,0.35) 并加全浏览器前缀，深色模式下切为 rgba(255,255,255,0.5)。
提示文字颜色太刺眼，直接用 rgba() 降透明度
纯灰字（比如 #999）在白色背景上依然抢眼，尤其和黑色正文对比太强。不是换色号，而是用 rgba(0, 0, 0, 0.4) 这类带 alpha 的值，让提示文字“退后一步”。rgba() 第四个参数是透明度，0.3–0.5 是常用安全区间，再低可能看不清，再高就又突兀了。
-
color: rgba(0, 0, 0, 0.4)比color: #666更柔和，且自动适配深色模式下背景变暗时的相对可读性 - 避免用
hsla()或十六进制透明色（如#0008），部分老浏览器不支持，rgba()兼容性最稳 - 如果表单背景不是纯白（比如浅灰
#f9f9f9），把 alpha 调到0.35会更协调
placeholder 文字用 ::placeholder 单独控制
输入框里的提示文字默认样式很弱，各浏览器渲染不一致，必须显式重写。不能只写 input::placeholder，要加全前缀保证生效：
input::placeholder {
color: rgba(0, 0, 0, 0.35);
}
input::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.35);
}
input::-moz-placeholder {
color: rgba(0, 0, 0, 0.35);
}
input:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.35);
}
- 别漏掉
-ms-前缀，IE11 还有不少存量用户 - alpha 值建议比 label 文字再低 0.05–0.1，因为 placeholder 本身视觉权重就该更低
- 不要给 placeholder 加
font-style: italic—— 现代设计中它已不是必要暗示，反而增加识别成本
label 和 placeholder 颜色不统一？先确认语义职责
很多人把 label 和 placeholder 当成同类提示，其实它们角色不同：label 是必读的字段标识，placeholder 是临时示例。所以颜色本就不该一样：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
label用rgba(0, 0, 0, 0.65)：确保可访问性（满足 WCAG AA 对比度） -
placeholder用rgba(0, 0, 0, 0.35)：明确告诉用户“这不是填进去的内容” - 如果用了浮动 label（如 Material Design 风格），placeholder 必须设为
transparent，否则文字重叠
深色模式下 rgba(0,0,0,.4) 会发灰发脏
硬套同一组 rgba() 值到深色背景上，黑色半透会变成脏灰。解决办法不是写两套颜色，而是用 color-scheme: light dark + @media (prefers-color-scheme: dark) 切换基色：
立即学习“前端免费学习笔记（深入）”；
@media (prefers-color-scheme: dark) {
label,
input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
- 深色模式下用白底黑字逻辑翻转：基色改
255, 255, 255，alpha 可略提高到0.5（因深背景对比更强） - 别依赖
inherit或currentcolor控制 placeholder，它们在深色模式下行为不可控 - 测试时真机打开系统深色开关，仅靠 Chrome 模拟器可能漏掉 Safari 的渲染差异
