uni-app nvue页面输入框修改placeholder颜色无效

uni-app nvue页面输入框修改placeholder颜色无效

开发环境 版本号 项目创建方式
Mac 11.3 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11.3

HBuilderX类型：正式

HBuilderX版本号：3.1.18

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iphone12/iphone11/iphone6

页面类型：nvue

打包方式：云端

示例代码：

<input id="username" class="label-input" name="input" :value="form.username" placeholder="输入您的手机/邮箱" confirm-type="next" type="text" autocomplete="off" placeholder-class="cl" placeholder-style="color:#fff"/>


操作步骤：


```html
<input id="username" class="label-input" name="input" :value="form.username" placeholder="输入您的手机/邮箱" confirm-type="next" type="text" autocomplete="off" placeholder-class="cl" placeholder-style="color:#fff"/>


预期结果：


输入框placeholder颜色能修改

实际结果：

输入框placeholder颜色无法修改


bug描述：


nvue页面输入框修改placeholder颜色无效  
通过placeholder-class 或者 placeholder-style均无效

更多关于uni-app nvue页面输入框修改placeholder颜色无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题复现 ，后续优化，已加分，感谢您的反馈！临时解决方案： !important 见关联帖子：https://ask.dcloud.net.cn/question/121045

更多关于uni-app nvue页面输入框修改placeholder颜色无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中，修改 placeholder 颜色确实与 vue 页面有所不同。nvue 基于原生渲染，不支持 placeholder-class 和 placeholder-style 属性。

可以通过以下方式实现 placeholder 颜色修改：

  1. 使用 placeholder-color 属性（推荐）：
<input placeholder="输入您的手机/邮箱" placeholder-color="#fff" />
  1. 使用 CSS 选择器（部分平台支持）：
input::placeholder {
    color: #fff;
}
  1. 对于 iOS 平台，还可以使用：
input::-webkit-input-placeholder {
    color: #fff;
}
回到顶部