只写::placeholder常不生效，因Safari 14.1前、IE11、旧Edge不识别，须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder四者，并注意优先级与属性限制。
为什么只写 ::placeholder 样式经常不生效
不是你写错了，是浏览器根本不认。Chrome 57+、Firefox 51+、Edge 79+ 才原生支持 ::placeholder，而 Safari 14.1 之前、IE11、旧版 Edge 都会直接忽略它。更麻烦的是，这些旧环境各自依赖不同前缀，漏掉任意一个，对应用户看到的就是默认灰黑色占位符。
常见错误包括：:placeholder（单冒号）、:: placeholder（带空格）、或只写标准写法不补前缀。DevTools 里看到规则被划掉？大概率是被 UI 框架（如 Ant Design）的全局 input { color: #333; } 覆盖了——伪元素优先级默认低于标签选择器。
- 必须四套前缀全写：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder - 顺序不重要，但建议把标准写法放最后，方便维护
- 别指望 PostCSS 自动补全，伪元素前缀它基本不处理
- 避免用
*::placeholder这类泛选器，无效
::placeholder 支持哪些样式？哪些写了也白写
::placeholder 不是真实 DOM 元素，而是渲染层的文本投影，只接受有限的文本类属性。设了 background 或 padding 不会报错，但浏览器静默丢弃——你调半天发现没反应，八成是踩了这个坑。
- ✅ 安全可用：
color、font-size、font-family、font-weight（建议用数值如600，bold在部分 Windows + Chrome 下失效）、opacity、line-height（但单独写可能无效，需嵌入font简写中） - ❌ 禁止使用：
background、border、padding、margin、display、height、width - ⚠️ 特别注意：
opacity: 1很关键——Firefox 默认 opacity 是0.54，不重置会导致颜色变浅，和设计稿对不上
Vue/React 项目里 ::placeholder 样式失效怎么办
不是框架 bug，是 CSS 作用域机制天然隔离了伪元素。Vue 的 <style scoped> 会给选择器加属性哈希，比如 input::placeholder 变成 input[data-v-xxx]::placeholder，但浏览器不支持带属性的选择器匹配伪元素。
立即学习“前端免费学习笔记（深入）”；
- Vue 中必须用
:deep(input::placeholder)显式穿透 - React + CSS Modules 中得用
:global(input::placeholder)包裹规则 - 某些 UI 库（如 Element Plus）会主动重置
::placeholder，检查 DevTools 是否被 strike-through；临时禁用所有外部 CSS 验证是否真无效 - 别在父级用
all: unset或all: initial，它们会清空伪元素样式
深色模式、动态主题下怎么让占位符自动适配
::placeholder 不响应 :focus，也不随系统主题自动切换。想让它在深色模式下变浅灰、亮色模式下变深灰，得靠媒体查询或 CSS 变量兜底。
- 用
@media (prefers-color-scheme: dark)单独覆盖颜色：input::placeholder { color: #666; } @media (prefers-color-scheme: dark) { input::placeholder { color: #aaa; } } - 如果项目已用 CSS 变量管理主题，推荐这样写：
:root { --placeholder-color: #999; } @media (prefers-color-scheme: dark) { :root { --placeholder-color: #aaa; } } input::placeholder, input::-webkit-input-placeholder, ... { color: var(--placeholder-color); } - 移动端务必真机测试——iOS Safari 15.4 之前不支持
text-transform: uppercase，慎用
最常被忽略的点：占位符文字本身不会自动出现，placeholder="请输入用户名" 属性必须存在，否则再全的 CSS 规则也出不来任何文字。别在调试样式时忘了检查 HTML 结构。
