::placeholder 写了没效果的主因是浏览器兼容性不足或被框架重置；需按顺序写标准+前缀写法，仅支持有限文本样式，动态修改须用CSS变量或JS模拟。
::placeholder 是现代浏览器中修改输入框提示文字颜色最直接的方式，但它不是写上就一定生效——漏掉冒号数量、被框架重置、旧版 Safari 不识别，都可能导致颜色不变。
为什么 ::placeholder 写了却没效果？
最常见原因不是语法错，而是浏览器根本不认这个选择器：
-
::placeholder（双冒号）只在 Chrome 57+、Firefox 51+、Edge 79+ 及 Safari 15.4+ 中原生支持；Safari 15.3 及更早版本会直接忽略它 - 写成
:placeholder（单冒号）是无效的，CSS 解析器会静默丢弃整条规则 - 某些 UI 框架（如 Ant Design、Bootstrap）会主动重置
::placeholder，比如设color: #6c757d; opacity: 0.5;，覆盖你的样式 - 在 Vue 的
<style scoped></style>或 React CSS Modules 中，input::placeholder会被自动加属性前缀，而浏览器不支持带属性的选择器匹配伪元素——必须用:deep(input::placeholder)或:global(...)穿透
怎么写才真正兼容主流环境？
不要只靠一条 ::placeholder。按实际目标用户决定是否保留旧前缀，但至少保留 ::-webkit-input-placeholder（覆盖 Safari 9–15.3、Chrome 49–56）和 :-ms-input-placeholder（IE 10–11）：
input::placeholder,
textarea::placeholder {
color: #999;
opacity: 1;
}
<p>/<em> Safari 9–15.3, Chrome <57, Opera </em>/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999;
opacity: 1;
}</p><p>/<em> IE 10–11 </em>/
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999;
opacity: 1;
}注意顺序：把标准写法放最前面，前缀写法放后面，避免旧规则意外覆盖新规则；opacity: 1 必须显式声明，否则 Firefox 默认 0.53、Chrome 某些版本会渲染过淡。
立即学习“前端免费学习笔记（深入）”；
哪些样式属性能用？哪些会失效？
::placeholder 不是真实 DOM 元素，只接受有限的文本类样式：
- ✅ 安全可用：
color、font-size、font-family、font-weight（建议用数值如600，bold在 Windows + Chrome 组合下可能不生效）、text-transform（iOS Safari 15.4 前不支持uppercase）、line-height（务必显式设为normal或匹配 input 自身值，否则 Safari 易截断） - ❌ 静默忽略：
background、border、padding、margin、width、height、transform
别用 opacity 替代 color 来“调浅”，它影响的是整体可读性；深色背景下如果 placeholder 是灰色，记得同步调亮，否则用户根本看不见提示。
动态改颜色只能靠 JS 模拟
CSS 伪元素无法通过 JavaScript 的 element.style 修改，getComputedStyle(input, '::placeholder') 返回 null，input.style.setProperty('--placeholder-color', '#f00') 也无效。
真要响应主题切换或用户操作，得换思路：
- 用 CSS 变量定义颜色，再用 JS 切换根变量：
:root { --placeholder-color: #999; } input::placeholder { color: var(--placeholder-color); }，然后document.documentElement.style.setProperty('--placeholder-color', '#333'); - 禁用
::placeholder，改用一个绝对定位的<span></span>模拟 placeholder，并用 JS 控制显隐和样式
最后提醒一句：移动端真机测试比 DevTools 模拟更重要——iOS Safari 对 ::placeholder 的 line-height 和 font-family 渲染逻辑和桌面版不同，很多问题只在 iPhone 上暴露。
