uni-app input placeholder-style以及placeholder-class无效

uni-app input placeholder-style以及placeholder-class无效

示例代码：

<input v-model="pwd" class="input-txt" password type="text" value="" placeholder="请输入密码" placeholder-class="placeholder"/>
.placeholder{
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}

操作步骤：

<input v-model="pwd" class="input-txt" password type="text" value="" placeholder="请输入密码" placeholder-class="placeholder"/>
.placeholder{
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}

预期结果：

提示字体颜色变成白色

实际结果：

提示字体颜色是默认色

bug描述：

input placeholder-style以及placeholder-class无效

.placeholder{
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}

在APP中实际是默认设置的颜色。

相关链接：

更多关于uni-app input placeholder-style以及placeholder-class无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

问题已确认，后续优化，已加分，感谢您的反馈！

更多关于uni-app input placeholder-style以及placeholder-class无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 中，placeholder-class 和 placeholder-style 在 App 端（特别是 iOS 和部分 Android 版本）确实存在兼容性问题，因为底层渲染方式与小程序不同。

原因：
App 端使用原生 input 组件渲染，而原生组件对 placeholder 的样式支持有限，尤其是通过 CSS 类名自定义样式可能不生效。

解决方案：

使用 placeholder-style 行内样式（部分平台支持较好）：
```
<input 
    placeholder="请输入密码" 
    placeholder-style="color: #FFFFFF; font-size: 32rpx;"
/>
```
注意：font-family 在 App 端可能不生效。
使用原生条件编译：
针对 App 端单独处理样式，例如通过 v-if 或条件编译区分平台：
```

<input placeholder="请输入密码" style="color: white;" />

```

回到顶部