chrome/firefox中::placeholder不生效需用双冒号并添加浏览器前缀：::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder；仅color等少数属性可靠，opacity等受限；避免scoped css和:focus::placeholder无效写法。
Chrome/Firefox中::placeholder不生效？检查伪元素选择器写法
直接写 ::placeholder 在部分浏览器（尤其是旧版 Safari 或未加前缀的 Chrome）里会被忽略。它不是标准属性，而是伪元素，必须配合正确的前缀和语法才能触发样式。
- 必须用双冒号
::placeholder，单冒号:placeholder是过时写法，现代浏览器已不支持 - 不同浏览器需要不同前缀：
::-webkit-input-placeholder（Chrome/Safari）、::-moz-placeholder（Firefox 18–）、::-ms-input-placeholder（IE10–11） - Firefox 19+ 支持标准
::placeholder，但若同时写了带前缀的规则，需注意层叠顺序——后写的会覆盖前面的
color能设，但font-size或opacity失效？别漏掉继承限制
::placeholder 伪元素只继承极少的 CSS 属性，比如 color、font 相关属性基本可用，但 opacity、text-shadow、background 等很多常用属性在某些浏览器中被禁用或表现异常。
-
color始终可靠，是改 placeholder 文字颜色最稳妥的方式 -
font-size和font-family多数情况下可用，但若父级input设了font简写，可能意外覆盖 placeholder 的字体设置 -
opacity在 Firefox 中无效，在 Chrome 中虽有效但会连同整个 input 的透明度一起变（实际是渲染 bug，非预期行为） - 避免对
::placeholder使用display、padding、margin—— 这些属性完全不生效
Vue/React 项目里 placeholder 样式突然失效？留意动态 class 注入时机
框架组件（如 <input> 被封装成 <myinput></myinput>）可能在 mounted 后才插入 DOM，或者通过 v-if / useState 控制显隐。此时若样式表加载早于节点挂载，::placeholder 规则可能被浏览器跳过解析。
- 确保 CSS 文件在 HTML 中位于
底部或通过rel="preload"提前加载，而非异步注入 - 不要把 placeholder 样式写在 scoped CSS（如 Vue 的
<style scoped></style>）里——它会加属性选择器，导致::placeholder伪元素匹配失败 - 若用 CSS-in-JS（如 styled-components），确认它支持伪元素插值；否则得退回到全局 style 块中写
输入框聚焦后 placeholder 消失但颜色残留？检查是否误用了:focus::placeholder
placeholder 只在输入框为空且未聚焦时显示。一旦获得焦点或输入内容，它就消失，所以给 :focus::placeholder 写样式毫无意义——浏览器根本不会应用。
-
:focus::placeholder是无效组合，所有主流浏览器都会忽略整条规则 - 想让 placeholder 在 focus 时“淡出”，只能靠 JS 监听
focus事件，临时移除 class 或切换data-placeholder属性再重置样式 - 更常见错误：把
input:focus的color设得很浅，结果用户打字时文字也变淡了——这是影响的是真实输入内容，不是 placeholder
真正麻烦的不是怎么写，而是不同浏览器对伪元素能力的开放程度不一致。哪怕写全了所有前缀，Safari 15.4 之前仍不支持 line-height 在 ::placeholder 上生效。遇到怪问题，先查 Can I Use 上 ::placeholder 的具体属性支持表，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
