移动端input::placeholder样式不生效，需用::-webkit-input-placeholder并加!important；uni-app和小程序须用专用属性；暗色模式应监听媒体查询并切换class；line-height与padding需与input一致。
移动端 input::placeholder 样式不生效？先确认是否用了错误的选择器
直接写 input::placeholder 在 iOS Safari（尤其是 15.4–16.x）和部分 Android WebView 中大概率失效——这些环境只认 ::-webkit-input-placeholder，且必须带双冒号、不能省略前缀。更关键的是，iOS 16.4+ 开始对伪元素样式施加更严格的继承限制：如果父级 input 没显式声明 color 或 font-size，::-webkit-input-placeholder 可能完全不渲染样式。
为什么加 !important 才有效，而且只在某些机型上需要？
原因有两个：
- iOS Safari 的原生表单样式层优先级极高，尤其在启用
appearance: none或自定义border-radius后，内置 placeholder 规则会强行覆盖外部 CSS - 部分安卓厂商定制 WebView（如华为 EMUI、小米 HyperOS）会把 placeholder 默认色硬编码为
#999，不响应普通声明，只认带!important的规则
所以必须写成：::-webkit-input-placeholder { color: #666 !important; }。别只加在最后一条，每条浏览器前缀规则都要加。
uni-app 或小程序里改不了 placeholder 颜色？别碰 ::placeholder
uni-app 的 <input> 组件、微信/支付宝小程序的原生 input 都不支持伪元素选择器。你写的 ::-webkit-input-placeholder 完全不会被解析。
立即学习“前端免费学习笔记（深入）”；
正确做法是：
- uni-app：用
placeholder-class属性，例如<input placeholder-class="ph-color" placeholder="搜索">，再写.ph-color { color: #666; } - 微信小程序：用
placeholder-style内联属性，例如<input placeholder-style="color:#666;font-size:14px;"> - Vue / React 项目若用了 scoped style（如
<style scoped>），伪元素会被隔离，得用:deep(input::-webkit-input-placeholder)或提全局样式
暗色模式下 placeholder 突然看不见？别只靠 prefers-color-scheme
@media (prefers-color-scheme: dark) 在真机 Safari 上触发不稳定——iOS 有时延迟响应，甚至不触发。更可靠的方式是监听系统主题变化并切换 class：
document.documentElement.classList.toggle('dark', window.matchMedia('(prefers-color-scheme: dark)').matches);
然后在 CSS 中写：.dark input::-webkit-input-placeholder { color: #666 !important; }。注意：不要依赖 color-scheme: dark 声明，它对 placeholder 无影响。
最常被忽略的一点：移动端 placeholder 的 line-height 和 padding 必须与 input 主体严格一致，否则文字会偏上或截断——这不是颜色问题，但常被误判为“样式没生效”。
