uni-search-bar 用 placeholder-style 设置 placeholder 颜色最稳妥,支持 color、font-size 等属性;custom 导航栏中用 uni-easyinput 也用 placeholder-style,原生 input 则需 placeholder-class 加伪类;鸿蒙仅认 placeholderColor 或 uni-easyinput 的 placeholder-style。

直接改 placeholder-style 属性就行,但必须分清用的是哪个组件、在哪一端运行——同一行代码,在 H5、App、小程序甚至鸿蒙上,生效逻辑完全不同。
uni-search-bar 的 placeholder 颜色怎么设
官方封装的 uni-search-bar 支持 placeholder-style 属性,这是最稳妥的方式:
-
placeholder-style="color:#999; font-size:28rpx"—— 行内写法,仅支持部分 CSS 属性(color、font-size、font-weight等) - 不要用
placeholder-class,它在uni-search-bar中不生效(该属性只对原生<input>有效) - H5 和 App 端基本都认这个写法;微信小程序端需确保基础库 ≥ 2.10.4,否则可能忽略
自定义导航栏里放 input,placeholder 颜色怎么调
当你把 <input> 或 uni-easyinput 手动塞进 custom 导航栏时,就得按原生输入框规则来:
- 用
placeholder-style="color:#fff"—— 这是uni-easyinput的标准写法,简单直接 - 若用原生
<input>,则必须配placeholder-class+ 对应 class 样式,且要加::-webkit-input-placeholder等伪类兼容(iOS Safari 尤其吃这一套) - 注意:custom 导航栏本身是 fixed 定位,若 placeholder 文字被裁切,大概率是父容器
overflow: hidden或高度不够,不是颜色问题
鸿蒙(HarmonyOS)下搜索框 placeholder 不变色?
鸿蒙目前不识别 placeholder-style,也不支持 placeholder-class 的 CSS 伪类。实测唯一可靠方式是:
- 改用
uni-easyinput组件,并通过条件编译包裹:<uni-easyinput placeholder="搜索" placeholder-style="color:#fff" />
- 或者干脆放弃样式定制,用
uni-search-bar的placeholderColor属性(鸿蒙认这个):placeholderColor="#fff" - 别试图用全局 CSS 覆盖,鸿蒙的 Webview 渲染层对伪类支持极弱
最容易被忽略的一点:placeholder 颜色改了但没生效,八成是因为你正在调试的平台根本没走那条代码路径——比如在 H5 上测试鸿蒙专属的 placeholderColor,或者在 App 端用了只对小程序有效的 placeholder-class。先确认当前 process.env.UNI_PLATFORM 值,再选对应方案。


















