关键在于使用::placeholder双冒号语法，仅支持color、font-size、opacity等有限样式，需注意选择器权重、显式声明font-family，并兼顾Safari旧版本加-webkit前缀。
如何用::placeholder选择器修改输入框占位符颜色和字体
直接生效的关键是：必须用::placeholder（双冒号），旧写法:placeholder（单冒号）在现代浏览器中已不推荐，且部分属性可能失效。它不是真正的 DOM 元素，而是伪元素，所以只能设置有限样式——比如color、font-size、opacity，但不能设display、padding或background（多数浏览器会忽略）。
常见写法示例：
input::placeholder {
color: #999;
font-size: 14px;
opacity: 1; /* 避免某些浏览器默认降低透明度 */
}
- Chrome / Edge / Firefox 支持
::placeholder，无需前缀 - Safari 15.4+ 支持，旧版需加
::-webkit-input-placeholder - 如果只写
::placeholder而没兼容旧 Safari，部分用户会看到默认灰色、小号字体
为什么::placeholder样式有时不生效
最常踩的坑是选择器权重不足或被其他规则覆盖。比如你写了input.form-control::placeholder，但全局有input::placeholder { color: #666; }且在后加载，就可能被覆盖。
- 检查 DevTools 中该伪元素是否被 strike-through（划掉），说明被更高权重要素覆盖
- 避免用
!important，优先提升选择器特异性，例如改用input[type="text"]::placeholder - 注意：伪元素不继承父级
font-family，必须显式声明，否则可能回退到浏览器默认字体 - 某些 CSS 预处理器（如 Sass）若未启用“嵌套伪类”支持，
&::placeholder可能编译失败，建议外提书写
跨浏览器兼容写法怎么组织才不冗余
不需要为每个浏览器都写一遍——现代项目可只保留两个声明：标准语法 + WebKit 旧前缀。Firefox 和 Chrome 新版本已完全支持::placeholder，Safari 15.4+ 同样如此；真正需要前缀的只有 Safari ≤15.3 和极老 Android WebView。
input::placeholder {
color: #777;
}
input::-webkit-input-placeholder {
color: #777;
}
- 不要写
:-moz-placeholder（Firefox 19–51 的旧语法），已废弃多年 - 不要写
::-ms-input-placeholder（IE10–11），IE 已退出主流支持场景 - 若项目明确支持 Safari 15.3 及更早，才需保留 WebKit 前缀；否则单写
::placeholder足够
能否用::placeholder做动画或响应式调整
可以加transition，但仅限于支持的属性（如color、opacity），且触发时机有限——它只在输入框获得焦点/失去焦点时隐式变化，无法像普通元素那样主动 hover 或 animate。
- 下面这段能工作：
input::placeholder {
color: #aaa;
transition: color 0.2s;
}
input:focus::placeholder {
color: transparent;
}
- 但
@keyframes对::placeholder无效，浏览器会静默忽略 - 媒体查询中可用，例如
@media (max-width: 480px) { input::placeholder { font-size: 12px; } } - 别试图给它加
transform或box-shadow，这些属性不会渲染
占位符样式本质是浏览器绘制层的文本装饰，能力边界比想象中窄；想实现复杂交互效果，更适合用 JavaScript 动态切换 class 控制真实 placeholder 属性值，或用 label 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
