占位符样式需兼容各浏览器，应同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder四者，并设opacity:1以统一Firefox透明度，仅支持color等文本属性。
输入框的占位符（placeholder）默认样式在不同浏览器中差异大，直接写 input::placeholder 有时无效，主要是因为浏览器前缀未兼容或选择器优先级/覆盖逻辑出错。
确认使用了正确的伪元素语法
现代标准是 ::placeholder（双冒号），但旧版 Chrome、Safari 和 Edge 仍需带前缀：
-
::placeholder—— 标准写法（Chrome 57+、Firefox 51+、Edge 16+） -
::-webkit-input-placeholder—— Safari、Chrome、Edge（旧） -
::-moz-placeholder—— Firefox 18–19（单冒号，低版本） -
::-ms-input-placeholder—— IE10–11
建议四者都写，确保全兼容。顺序无关紧要，但推荐把标准写法放最后，便于维护。
检查 CSS 优先级和继承限制
占位符文本本身不继承父元素所有样式（比如 font-size 可继承，color 默认不继承），且部分属性受限（如 background、border 不能作用于 placeholder 文本本身）：
立即学习“前端免费学习笔记（深入）”；
- 支持常用文本属性：
color、font-size、font-weight、line-height、text-align - 不支持盒模型属性：
padding、margin、border、background（对 placeholder 文本块无效） - 若颜色没生效，先确认是否被更高优先级规则覆盖（如用
!important临时验证）
统一风格的实用写法示例
以下是一段兼顾兼容性与可读性的占位符样式代码，可直接复用：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #999;
font-size: 14px;
font-weight: 400;
opacity: 1; /* 防止 Firefox 降低透明度 */
}
注意：opacity: 1 很关键——Firefox 默认会将 placeholder 设为半透明（opacity: 0.54），不重置会导致颜色变浅、风格不一致。
进阶：用 CSS 自定义属性动态控制
如果项目已用 CSS 变量管理主题色，可以这样增强可维护性：
:root {
--placeholder-color: #a0a0a0;
--placeholder-font-size: 14px;
}
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: var(--placeholder-color);
font-size: var(--placeholder-font-size);
opacity: 1;
}换主题时只需改变量值，所有 placeholder 自动同步更新。
基本上就这些。占位符样式不是“不能改”，而是得写全、写对、写稳——补上前缀、重置 opacity、避开禁用属性，风格就能真正统一。
