只写::placeholder会失效，必须补全四套前缀（::-webkit-input-placeholder、::-moz-placeholder、:-moz-placeholder、:-ms-input-placeholder）才真正生效；它仅美化placeholder属性定义的内容，不支持添加文字。
只写 ::placeholder 会失效，必须补全四套前缀才真正生效；它不能添加文字，只能美化已用 placeholder 属性定义好的内容。
为什么 ::placeholder 样式不显示
最常见原因是浏览器不认标准写法。Chrome ≤56、Firefox ≤19、IE10–11、旧 Edge 都不支持 ::placeholder，只认带前缀的版本。漏掉任意一个，对应环境里就退回默认灰黑色小字。
-
::-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
哪些 CSS 属性能用，哪些设了也白设
::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 时立即消失
原生行为是“空值 + 未聚焦”才显示，focus 本身不会隐藏它。想视觉上聚焦即隐，得靠 CSS 强制控制透明度。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
input:focus::placeholder { opacity: 0; transition: opacity 0.15s; }，比color: transparent更稳妥 - 别用
display: none：部分浏览器不支持，且触发重排 - 过渡时间别超
0.2s，否则用户可能看到残留文字 - 对
textarea同样有效，但要单独写textarea:focus::placeholder
常见踩坑点：placeholder 属性本身没写
::placeholder 伪元素不生成内容，只美化。没写 placeholder="xxx"，再全的 CSS 规则也出不来任何文字。
-
placeholder只对<input type="text">、<input type="email">、<input type="search">、<textarea>有效；<select>、<input type="date">、<input type="number">不保证支持 - 别把
placeholder当value用：<input placeholder="张三">是错误示范，用户一点击就清空，干扰输入 - UI 框架（如 Ant Design）可能封装了 input 并禁用原生 placeholder，此时得查文档，或改用其提供的 API 控制
真正麻烦的不是写多少行 CSS，而是每套前缀都得对齐参数、权重、单位；稍有遗漏，某个浏览器里就彻底失效。暗色模式下还得额外加 media query，不然 opacity: 0.7 在深背景上直接看不见。
