uni-app input组件 placeholder-style和placeholder-class设置字体无效

uni-app input组件 placeholder-style和placeholder-class设置字体无效

测试过的手机

iPhone13ProMax,小米k30，vivo

示例代码：

<template>
<view class="" style="margin-top: 200rpx;" >
<input class="input1" placeholder-class="fontsize1" placeholder="android无效,ios有效" />
<input class="input1" :placeholder-class="[fontsize1]" placeholder="两端均无效" />
<input class="input1" placeholder-style="font-size: 22rpx;color:blue;" placeholder="两端均无效" />
<input class="input1" :placeholder-style="{fontSize:'22rpx',color:'green'}" placeholder="android无效,ios有效" />
<input class="input1" :placeholder-style="'font-size: 22rpx;color:yellow;'" placeholder="两端均无效" />
</view>
</template>  

<script>
export default {
components:{},
data() {},
methods: {

}  
}
</script>  

<style>
.input1 {background-color: #ccc;font-size:32rpx;height: 90rpx;margin-top: 20rpx;}
.fontsize1 {font-size: 22rpx;color: red;}
</style>

操作步骤：

执行代码即可

预期结果：

正常显示字号

实际结果：

无法正常显示字号

bug描述：

placeholder-style和placeholder-class设置字体无效，有些在ios上生效，android全部都无效。不知道是bug还是我写的有问题，试了好多种方式都不行

示例图片1 示例图片2

相关链接：


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

2 回复

此问题已记录后续优化，已加分，感谢您的反馈！

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


在 uni-app 中，input 组件的 placeholder-style 和 placeholder-class 用于设置占位符（placeholder）的样式。如果你发现设置字体样式无效，可能有以下几个原因：

1. 检查样式优先级

  • placeholder-style 是内联样式，优先级较高，但可能会被其他样式覆盖。
  • placeholder-class 是通过类名设置样式，优先级较低，可能会被其他样式覆盖。

2. 检查样式是否正确

  • 确保你设置的样式是正确的，例如字体大小、字体颜色等。
  • 如果使用 placeholder-class，确保类名对应的样式在样式表中定义正确。

3. 平台兼容性

  • 不同平台（如微信小程序、H5、App）对 placeholder-style 和 placeholder-class 的支持可能有所不同。确保你测试的平台支持这些属性。

4. 使用 placeholder-style 示例

<template>
  <input placeholder="请输入内容" :placeholder-style="{'font-size': '14px', 'color': '#999'}" />
</template>

5. 使用 placeholder-class 示例

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

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

6. 检查是否被覆盖

  • 如果你使用了全局样式或其他样式库，可能会覆盖 placeholder-style 或 placeholder-class 的设置。可以通过增加样式优先级或使用 !important 来解决。
.custom-placeholder {
  font-size: 14px !important;
  color: #999 !important;
}

7. 使用 :host 或 ::placeholder 伪类

  • 在某些情况下，可以使用 ::placeholder 伪类来设置占位符样式。
input::placeholder {
  font-size: 14px;
  color: #999;
}
回到顶部