::placeholder需兼容各浏览器前缀且仅支持有限样式，focus时隐藏需用opacity过渡，contenteditable不支持该伪元素，应避免过度美化影响可访问性。
为什么直接写 ::placeholder 有时不生效
因为浏览器引擎前缀还没统一，::placeholder 是标准写法，但 Chrome/Safari（WebKit）、Firefox（Gecko）、Edge（旧 Trident/EdgeHTML）各自实现不同。只写一个规则，大概率在某个浏览器里完全没效果。
常见错误现象：::placeholder { color: #666; } 在 Firefox 里不生效，Chrome 里正常；或者移动端 Safari 忽略整个规则。
- 必须同时覆盖
::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder -
::-moz-placeholder和:placeholder-shown不是同一机制，别混用 - IE 10–11 只认
:-ms-input-placeholder，且不支持双冒号写法（得用单冒号） - 伪元素选择器优先级低，如果父级有
!important的 color，它会被覆盖
::placeholder 能设哪些样式，哪些不能设
能设的：颜色（color）、字体（font-size/font-family）、透明度（opacity）、文字装饰（text-decoration）、行高（line-height，部分浏览器支持）
不能设的：display、visibility、height/width、background（部分旧版 Firefox 不支持）、padding 或 margin（会破坏输入框盒模型，且无意义）
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
opacity比color更安全——避免深色主题下 placeholder 发灰看不清 - 不要给
::placeholder加background，它不会渲染在 input 底层，而是叠在文字上，易导致闪烁或裁剪 - 移动端 iOS Safari 对
font-size缩放敏感，建议用rem或em，别用固定px
如何让 placeholder 在 focus 后立即消失，而不是等输入才消失
原生 placeholder 是“空值 + 未聚焦”时才显示，focus 本身不会隐藏它；只有用户开始输入或脚本修改了 value 才触发隐藏。想让它 focus 就消失，得靠 CSS 配合 :focus 状态强制隐藏。
- 用
input:focus::placeholder { opacity: 0; transition: opacity 0.15s; } - 别用
display: none—— 它会导致重排，且部分浏览器不支持 - 加
transition防止突兀消失，但别超过 0.2s，否则用户可能看到残留 - 注意：这个技巧对
<textarea></textarea>同样有效，但需单独写textarea:focus::placeholder
contenteditable 元素怎么套用 ::placeholder
不能。所有浏览器都不支持给 contenteditable="true" 的 <div> 或 <code><p></p> 使用 ::placeholder —— 它根本不是这些元素的合法伪元素目标。
试图写 div[contenteditable]::placeholder，开发者工具里能看到规则，但计算样式中永远为空。
- 必须用 JS + CSS 模拟：加一个
data-placeholder属性，再用::before+content: attr(data-placeholder) - JS 要监听
input和focus/blur，用innerText.trim() === ''判断是否为空（别用textContent，它会把<br>
当内容） - 移动端 focus 时机不稳定，建议用
setTimeout(() => {...}, 30)延迟检测，避免 placeholder 闪一下又出来
真正容易被忽略的是：placeholder 不是视觉装饰层，它是语义化输入提示。过度美化（比如加 icon、多行、动画）反而损害可访问性——屏幕阅读器不会读取伪元素内容，也不会播报你用 data- + ::before 模拟的“占位符”。该简则简。
