::placeholder不生效主因是样式被全局重置覆盖，需用input::placeholder等具体选择器并检查开发者工具中的删除线；IE11需额外加::-ms-input-placeholder；优先用rgba()确保可访问性对比度；iOS Safari会强制缩小placeholder字体，应通过color和letter-spacing优化而非font-size。
Chrome/Firefox里::placeholder不生效？检查伪元素是否被重置
很多项目全局写了 *::placeholder { color: transparent; } 或用 !important 覆盖了默认样式，导致你自己的设置完全没反应。这不是浏览器兼容问题，是样式优先级被干掉了。
实操建议：
- 用浏览器开发者工具检查
::placeholder是否被划掉（strikethrough），重点看是否被更高权重的选择器覆盖 - 把你的规则写成
input::placeholder, textarea::placeholder { color: #999; }，避免只写::placeholder被父选择器压制 - 如果用了 CSS-in-JS 或框架（如 Tailwind），确认它没注入全局重置 —— 比如某些 reset.css 会主动清空 placeholder 颜色
IE11和旧版Edge必须用::-ms-input-placeholder
IE11 不认标准的 ::placeholder，只吃微软私有前缀。光写标准语法，在 IE 里 placeholder 字体颜色会回退到系统默认灰（通常太深，对比度超标）。
实操建议：
- 必须同时写两套：
input::placeholder { color: rgba(153, 153, 153, 0.7); }input::-ms-input-placeholder { color: rgba(153, 153, 153, 0.7); }- 注意：
::-ms-input-placeholder只在 IE11 和 Edge ≤18 生效，现代 Edge 已支持标准语法，但保留它无害 - 别用
opacity替代rgba()—— IE11 对 opacity 的 placeholder 渲染不稳定，有时直接消失
用rgba()比#999更可控，尤其涉及可访问性
纯 hex 值（比如 #999）在背景为白色时对比度约 4.5:1，刚好卡在 WCAG AA 标准边缘；一旦表单背景稍暗（比如 #f8f9fa），对比度就掉到 3.8:1 以下，文字难看清。
实操建议：
- 优先用
rgba(128, 128, 128, 0.6)这类带 alpha 的值，既能压低明度，又能通过透明度适配不同背景 - 避免
hsl(0, 0%, 60%)这类写法 —— 它本质还是等价于灰阶 hex，在部分浏览器渲染略发青，不如 rgba 稳定 - 如果设计稿要求“浅灰”，别直接抄
#ccc；测一下它在你实际背景色上的对比度（可用 axe 或 Chrome Lighthouse）
移动端iOS Safari对::placeholder的字体大小限制
iOS Safari（特别是 iOS 15+）会强制把 placeholder 文字缩小到 13px 左右，哪怕你写了 font-size: 16px 也不生效 —— 这不是 bug，是苹果的可读性策略。
实操建议：
- 不要试图用
font-size强行撑大 placeholder，iOS 会忽略 - 如果需要视觉上“更显眼”，改用
color+letter-spacing: 0.2px微调清晰度（有效） - 避免在 placeholder 里塞长文本，iOS 缩小后容易糊成一片；短提示（如 “邮箱”）比 “请输入您的常用邮箱地址” 更可靠
真正麻烦的不是写法，是不同环境对同一行 color 的解释差异——iOS 把 rgba 的 alpha 当作整体亮度调节，而 Android Chrome 直接按通道混合。调色时得真机连着看，模拟器不够准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
