只写 ::placeholder 没效果是因为 IE11、旧 Edge（≤18）、Safari ≤15.3、Firefox ≤18 等浏览器不支持该标准语法，必须同时手写四套前缀规则：input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder 和 input::placeholder，且标准写法应置于最后以确保覆盖；PostCSS 不自动补全，泛选器 *::placeholder 无效；::placeholder 仅支持 color、font-size、opacity 等有限文本样式，禁用 background、padding、border 等盒模型属性；常见失效原因包括选择器权重不足、父级 color 继承冲突或 UI 框架重置样式，需用更具体选择器或 !important 显式覆盖；Vue/React 中无法通过内联 style 控制，须用动态 class 切换，并注意 scoped CSS 隔离问题。
只写 ::placeholder 为什么没效果
因为现代浏览器虽支持标准语法，但 IE11、旧 Edge（≤18）、Safari ≤15.3、Firefox ≤18 这些环境根本不认 ::placeholder。漏掉任意一套前缀，对应浏览器里就退回默认灰黑色小字，连颜色都改不了。
必须手写四套规则，顺序建议把标准写法放最后（覆盖旧规则）：
-
input::-webkit-input-placeholder（Chrome/Safari/Opera/旧 Edge） -
input::-moz-placeholder（Firefox 19+；注意不是单冒号） -
input:-ms-input-placeholder（IE10–11） -
input::placeholder（Chrome 57+/Firefox 51+/Safari 10.1+/Edge 79+）
PostCSS 不会自动补全这些前缀，*::placeholder 这种泛选器也无效——必须精确到 input::placeholder 或 textarea::placeholder。
::placeholder 能设哪些样式，哪些设了白搭
它不是真实 DOM 元素，浏览器只允许极有限的文本类属性生效，其他会被静默丢弃，DevTools 里也看不到报错。
立即学习“前端免费学习笔记（深入）”；
能用的：
-
color（最稳妥，推荐主用） -
font-size、font-family（需显式声明，不继承父级） -
opacity（Firefox 默认是 0.53，常需重置为1） -
text-align（对textarea有效） -
font简写（如font: 14px/1.4 "Segoe UI", sans-serif；单独写line-height无效）
禁用的：
-
background（iOS Safari 易闪烁，且文字叠在上面） -
padding、margin、border、width、height -
display、visibility、content
为什么写了 color 还是灰色？常见权重和继承问题
最常见原因是选择器太弱，或者父容器设置了 color 导致继承冲突。::placeholder 继承性极弱，不会自动继承父级字体色。
实操建议：
- 别只写
input::placeholder，用更具体的选择器链，比如.form-control input::placeholder - 如果父级有
color: #333，就在伪元素里显式重写color: #777 !important（这里!important合理） - 用 DevTools 的「Computed」面板查最终生效的
color和opacity值，别只盯着「Styles」里你写的那条 - 检查是否被 Normalize.css 或其他重置样式覆盖了，默认可能设了
color: transparent
Vue/React 项目里动态控制 placeholder 样式要注意什么
内联 style 绑定对 ::placeholder 完全无效——伪元素不能通过 :style 控制。
正确做法是用 class 切换：
- Vue：
:class="{ 'placeholder-error': isInvalid }"，再写.placeholder-error input::placeholder { color: #e74c3c; } - React：用
className动态加类名，CSS 规则走外部文件或styled-components的 className 注入 - 如果用了 scoped CSS（如 Vue 的
<style scoped>），::placeholder会被加上属性选择器导致匹配失败，得用deep或全局样式兜底
另外，type="number" 在部分 Chrome 版本中会忽略 ::placeholder，必要时换成 type="text" + JS 校验。
