移动端input::placeholder颜色不一致，因ios safari（15.4–16.x）等只认::-webkit-input-placeholder且需!important；uni-app和小程序不支持伪元素，须用placeholder-class或placeholder-style；暗色模式应监听matchmedia而非仅依赖@media。
移动端 input 的 ::placeholder 颜色不一致，不是 CSS 写得不够多，而是不同环境对伪元素的支持逻辑完全不同——iOS Safari、安卓 WebView、uni-app 和小程序各自有一套规则，混用一套样式必然失效。
为什么直接写 ::placeholder 在 iOS 上大概率不生效
iOS Safari（尤其是 15.4–16.x）和部分安卓 WebView（如华为 EMUI、小米 HyperOS）根本不响应标准 ::placeholder，只认 ::-webkit-input-placeholder，且必须带双冒号、不能省略前缀。更关键的是，iOS 16.4+ 开始限制伪元素继承：如果父级 input 没显式声明 color 或 font-size，::-webkit-input-placeholder 可能完全不渲染。
- 必须写成
::-webkit-input-placeholder { color: #666 !important; }，!important不是可选，是必要 - 每条前缀规则都要加
!important，不能只在最后一条加 - 避免用
opacity控制深浅——iOS Safari 对opacity在 placeholder 上支持极差，甚至导致文字消失 - 如果用了
appearance: none或自定义border-radius，原生 placeholder 样式层会进一步抢占优先级，此时仅靠选择器权重不够，!important是唯一可靠手段
uni-app 和微信小程序里为什么 ::placeholder 完全没反应
uni-app 的 <input> 组件、微信/支付宝小程序的原生 input 标签，压根不解析任何伪元素选择器——你写的 ::-webkit-input-placeholder 在编译或渲染阶段就被忽略。
微信小程序 TabBar 图标生成技能，使用 Python PIL 绘制简约几何图标（未选中灰、选中绿），自动写入 app.json 配置。适用于“生成 tabBar 图标”、“底部菜单栏图标”、“tab 图标”等指令。
- 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 项目若用了
<style scoped></style>，::placeholder会被属性选择器隔离，得用:deep(input::-webkit-input-placeholder)或提至全局样式
暗色模式下 placeholder 突然看不见，@media (prefers-color-scheme: dark) 为啥靠不住
@media (prefers-color-scheme: dark) 在真机 Safari 上触发不稳定，iOS 有时延迟响应，甚至不触发。更隐蔽的问题是：某些 UI 框架或重置样式（如 normalize.css）会在暗色媒体查询里把 ::placeholder 设为 #000，结果浅色背景上反而变成黑字，直接“隐身”。
- 别只依赖 CSS 媒体查询，改用 JS 监听系统主题变化：
window.matchMedia('(prefers-color-scheme: dark)')+addEventListener，动态切换 class - 用 DevTools 的 “Computed” 面板点开
::placeholder，看哪条规则实际生效——经常是某条全局*::placeholder覆盖了所有输入框 - 避免用
inherit或currentcolor做 placeholder 颜色，Safari 会继承input的 border 颜色，导致文字不可见
Firefox 和旧版浏览器里 placeholder 颜色发虚，opacity: 1 是必须项
Firefox 默认给 placeholder 加了 opacity: 0.53，就算你写了 color: #999，看起来还是灰蒙蒙的；而 IE11 完全不支持任何 ::placeholder 变体，opacity 在它身上无效甚至引发渲染异常。
- 所有前缀规则都必须显式写
opacity: 1，包括::-moz-placeholder和::placeholder - IE11 下彻底放弃 CSS 方案，改用 JS 模拟：用
<label></label>覆盖在input上，通过focus/blur控制显隐，且要设pointer-events: none，否则点不到输入框 - 别用
rgba()模拟半透效果——Firefox 对opacity支持差，但对rgba()的 color 渲染稳定得多
真正麻烦的从来不是写几行 CSS，而是同一份代码在 iOS、安卓 WebView、小程序、PC 浏览器里走的是四套完全不同的渲染路径。最容易被忽略的点是：你以为在调样式，其实是在跟不同引擎的解析器 negotiate。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
