uni-app 在nvue下，修改input的placeholder的字体大小不生效

uni-app 在nvue下，修改input的placeholder的字体大小不生效

示例代码：

<input placeholder-class="holdInputClass" placeholder-style="font-size:24rpx">

操作步骤：

<input placeholder-class="holdInputClass" placeholder-style="font-size:24rpx">

预期结果：

<input placeholder-class="holdInputClass" placeholder-style="font-size:24rpx">

实际结果：

<input placeholder-class="holdInputClass" placeholder-style="font-size:24rpx">

bug描述：

在nvue下，修改input的placeholder的字体大小不生效，class在真机上直接没赋值，修改style也是不生效，h5上可以。正常在nvue下修改文本的基本样式是需要再text标签里的。是不是无解了

开发环境 版本号 项目创建方式
Windows window7 HBuilderX

相关链接


更多关于uni-app 在nvue下，修改input的placeholder的字体大小不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

请升级至HBuilder X 3.4.4-alpha试下

更多关于uni-app 在nvue下，修改input的placeholder的字体大小不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不能用rpx，要px才能生效

时隔一年，这个问题还没人解决，是不是官方放弃了？社区好多人提这个问题的呀！ HbuilderX已经升级到最新版X3.95都不行，展示就跟文本没有放到text标签里边一样样式不生效，感觉掉坑里了

在 uni-app 的 nvue 页面中，input 组件的 placeholder 样式确实与普通的 vue 页面有所不同。nvue 是基于 weex 的原生渲染引擎，因此在样式支持上有一些限制。

要修改 input 组件的 placeholder 字体大小，可以尝试以下方法：

方法一：使用 placeholder-style 属性

nvue 中的 input 组件支持 placeholder-style 属性，可以通过该属性直接设置 placeholder 的样式。

<template>
  <view>
    <input 
      type="text" 
      placeholder="请输入内容" 
      placeholder-style="font-size: 20px; color: #999;"
    />
  </view>
</template>

方法二：使用 placeholder-class 属性

如果你需要更复杂的样式，可以使用 placeholder-class 属性，然后在样式表中定义对应的类。

<template>
  <view>
    <input 
      type="text" 
      placeholder="请输入内容" 
      placeholder-class="custom-placeholder"
    />
  </view>
</template>

<style>
.custom-placeholder {
  font-size: 20px;
  color: #999;
}
</style>

注意事项

  1. 样式支持有限：nvue 中的样式支持与 weex 一致，某些 CSS 属性可能不支持或表现不一致。
  2. 字体大小单位：在 nvue 中，建议使用 px 作为单位，避免使用 rem 或 em 等相对单位。
  3. 全局样式影响：nvue 中的样式是局部作用域的，确保你的样式定义在正确的作用域内。

示例代码

以下是一个完整的示例代码，展示了如何在 nvue 中修改 input 的 placeholder 字体大小：

<template>
  <view class="container">
    <input 
      type="text" 
      placeholder="请输入内容" 
      placeholder-style="font-size: 20px; color: #999;"
    />
  </view>
</template>

<style>
.container {
  padding: 20px;
}
</style>
回到顶部