::placeholder 没反应是因浏览器兼容性不统一，需补全各厂商前缀伪元素并处理 Bootstrap 覆盖、rgba 颜色设置及 dark mode 适配等问题。
只写 ::placeholder 为什么没反应
因为浏览器兼容性不统一，::placeholder 是 Chrome 57+、Firefox 52+、Edge 16+ 才支持的标准语法，但 Safari 15.4 之前（包括绝大多数 iOS 用户）完全不认它。你写的 input::placeholder { color: #6c757d; } 在旧 Safari 或 IE11 里压根不会解析，更别说生效了。
常见错觉是“我写了，但颜色没变”，其实不是 CSS 写错了，而是目标浏览器根本没执行这条规则。DevTools 里也看不到它被划掉——因为它压根没被加载。
- 必须同时补全
::-webkit-input-placeholder（Safari/Chrome 旧版）、::-moz-placeholder（Firefox 18–19）、:-ms-input-placeholder（IE10–11） -
::-moz-placeholder要用双冒号，但:-ms-input-placeholder必须用单冒号——写错一个就断一截兼容链 - 别用
*::placeholder这种通配写法，它在所有浏览器里都不匹配任何元素
Bootstrap 下 ::placeholder 被覆盖怎么办
Bootstrap 5 的 _forms.scss 里明确定义了 .form-control::placeholder，带 color 和 opacity，而且选择器特异性比你写的 input::placeholder 高。所以即使浏览器支持标准语法，你的规则也会被它的 CSS 直接盖掉。
不用 !important——它在旧 Safari 对伪元素无效，还让后续维护变脆弱。
立即学习“前端免费学习笔记（深入）”；
- 改用更高特异性选择器，比如
.form-control::placeholder或input.form-control::placeholder - 确保自定义 CSS 文件在 Bootstrap CSS 之后加载（顺序决定层叠优先级）
- 如果用了 Sass，把占位符样式写在
@import "bootstrap"之后，避免被变量重置干扰
颜色和透明度怎么设才不出错
::placeholder 不继承父级 color 或 font-family，哪怕你给 input 设了 color: #333，占位符还是显示浏览器默认灰黑 Times New Roman。而且 opacity 在 Firefox 下可能失效或渲染异常，直接用 rgba() 更稳。
- 推荐写法：
color: rgba(108, 117, 125, 0.6);—— 比color: #6c757d; opacity: 0.6;兼容性更好 - 显式声明
font-family，否则旧 Safari 可能回退到Courier - 避免用
inherit或currentcolor，Safari 会继承 border 颜色，导致文字不可见 - 深色背景上别用纯白
#fff，加opacity或改用rgba(255, 255, 255, 0.7)防眩光
Tailwind 用户别漏掉 dark mode 适配
Tailwind 的 placeholder:text-gray-400 默认不响应系统暗色模式，dark:placeholder:text-gray-500 也不会自动触发，除非 HTML 根节点有 class="dark"。
- 手动切换主题时，必须执行
document.documentElement.classList.toggle('dark') - 如果项目用
data-theme="dark"这类自定义属性，得在tailwind.config.js里配置darkMode: 'class'并指定 class 名 -
placeholder-opacity-70必须和placeholder:text-{color}搭配使用，单独写无效 - 别写
placeholder:opacity-70——这个类根本不存在
