只写::placeholder没效果，因为Chrome≤56、Firefox≤19、IE10–11、Edge12–18等主流旧版浏览器不支持标准写法，仅识别带前缀版本；漏任一前缀（如::-webkit-input-placeholder、::-moz-placeholder、:-moz-placeholder、:-ms-input-placeholder）即在对应环境退为默认灰黑小字。
只写 ::placeholder 为什么没效果
因为绝大多数还在用的浏览器（Chrome ≤56、Firefox ≤19、IE10–11、Edge 12–18）根本不认这个标准写法。它们只认带前缀的版本，漏掉任意一个，对应环境里就退回默认灰黑色小字。
-
::-webkit-input-placeholder覆盖 Chrome/Safari/Opera/旧 Edge -
::-moz-placeholder和:-moz-placeholder（单冒号）都要写，否则 Firefox 18–19 完全不生效 -
:-ms-input-placeholder（IE10–11）和::-ms-input-placeholder（Edge 12–18）是两套语法，缺一不可 - PostCSS 不会自动补全这些伪元素前缀，必须手写；泛选器如
*::placeholder无效，得精确到input::placeholder或textarea::placeholder
::placeholder 能设哪些样式，哪些设了白费
::placeholder 不是真实 DOM 元素，浏览器只允许它响应有限文本类属性。设了但没效果的属性会被静默丢弃，DevTools 里也看不到报错，容易反复调试却找不到原因。
- 能用：
color、font-size、font-family（必须显式声明，不继承父级）、opacity（Firefox 默认0.53，常需重置为1）、text-align、line-height（Safari 易错位，慎用） - 不能用：
padding、margin、background、width、height、display、visibility——设了也没渲染，还可能破坏输入框盒模型 - 别给
::placeholder加background：它不是画在 input 底层，而是叠在文字上，iOS Safari 下易闪烁或裁剪
聚焦时让 placeholder 立即消失的稳妥写法
原生行为是“空值 + 未聚焦”才显示，focus 本身不会隐藏它。想视觉上聚焦即隐，得靠 CSS 强制控制透明度。
- 用
input:focus::placeholder { opacity: 0; transition: opacity 0.15s; }，比color: transparent更稳妥 - 别用
display: none：部分浏览器不支持，且触发重排 - 过渡时间别超
0.2s，否则用户可能看到残留文字 - 对
textarea同样有效，但要单独写textarea:focus::placeholder
最容易被忽略的两个前提
再全的 CSS 规则也出不来任何文字，如果这两个前提没满足：
立即学习“前端免费学习笔记（深入）”；
-
placeholder属性本身没写：比如<input>没加placeholder="请输入"，伪元素不生成内容，只美化 - 只对
<input>和<textarea>有效，不支持<select>、<button>、<div>等元素；Vue/React 封装组件里，必须把placeholderprop 透传到原生<input>上
