input::placeholder需加浏览器前缀并用!important；注意line-height和padding匹配；暗色模式用prefers-color-scheme媒体查询；动态变色应切换class而非内联style。
input placeholder颜色不生效？检查伪元素选择器写法
直接写 input::placeholder 是最简方案，但老版本浏览器（比如 IE、旧版 Safari）不认这个，得加带前缀的变体。光写 color 不够，有些浏览器默认会覆盖成灰色，必须用 !important 才能压过内置样式。
-
::placeholder是标准写法，Chrome 57+、Firefox 51+、Edge 79+ 支持 - 兼容旧版要补上：
::-webkit-input-placeholder（Safari/Chrome）、::-moz-placeholder（Firefox 18–50）、:-ms-input-placeholder（IE10–11） - 如果用了 CSS-in-JS 或 scoped style（如 Vue 的
<style scoped></style>），伪元素可能被隔离失效，得用:deep()或提全局样式
placeholder文字被截断或对不齐？注意行高和内边距继承
占位符文字默认继承 input 的 line-height 和 padding，但某些字体下垂直居中会偏移。尤其在移动端，font-size 小 + line-height 大时，文字常贴顶或下沉。
- 别只设
color，同步配line-height和vertical-align（虽然后者对 placeholder 无效，但说明问题出在父级排版） - 更稳妥是统一控制：给
input设box-sizing: border-box+ 明确padding，再让::placeholder的font-size和line-height与之匹配 - 避免用
height控制输入框高度，优先用padding+font-size，否则 placeholder 容易错位
暗色模式下placeholder看不清？别硬写死颜色值
写死 color: #999 在深色背景上就糊了。CSS 原生支持 color-scheme 和 prefers-color-scheme，但 placeholder 本身不响应系统主题切换——得靠媒体查询兜底。
- 用
@media (prefers-color-scheme: dark)重置::placeholder颜色，比如color: #666 !important - 如果项目已用 CSS 变量（如
--placeholder-color），记得在媒体查询里也更新变量值，否则变量不会自动响应 - 测试时别只看 Chrome 开发者工具的“模拟暗色模式”，真机 Safari 和 Android Chrome 对
prefers-color-scheme的触发时机有差异
Vue/React 里动态控制 placeholder 颜色？别在模板里 inline 写 style
想根据状态变色（比如表单校验失败时标红），直接在 <input :style="..."> 里写 placeholder 样式是无效的——style 属性不作用于伪元素。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是切换 class，比如
:class="{ 'error-input': hasError }"，然后在 CSS 里写.error-input::placeholder { color: #f44 !important } - React 中若用 styled-components，需用
&::placeholder写嵌套，且确保插件已启用css`...`的伪元素支持 - 动态改
document.styleSheets插入规则太重，除非极端场景，否则绕开
placeholder 伪元素的样式优先级天生偏低，!important 几乎是刚需；另外，它不支持所有 CSS 属性（比如 background、border 无效），能用的就那几个：color、font-size、opacity、text-decoration —— 别试别的。
