uni-app中uni-easyinput组件和input组件，设置placeholder的color、font-size样式时，h5端样式表现不统一

uni-app中uni-easyinput组件和input组件，设置placeholder的color、font-size样式时，h5端样式表现不统一

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

产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.3.2

浏览器平台：Chrome

浏览器版本：版本 95.0.4636.4（正式版本） （64 位）

bug描述：

uni-easyinput 组件 和 input 组件，设置placeholder的color、font-size样式，在h5端样式表现不统一(小程序端未看出明显的差别)

示例代码：

<uni-easyinput  
  :value="value"  
  placeholder="请输入名称"  
  placeholderStyle="color:#999999;font-size:28rpx;"  
/>
<input type="text" :value="value" placeholder-style="color:#999999;font-size:28rpx;" placeholder="请输入名称" />
`

更多关于uni-app中uni-easyinput组件和input组件，设置placeholder的color、font-size样式时，h5端样式表现不统一的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

uni-easyinput 设置 font-weight: 500; 就一样了 ,组件内默认是 300

更多关于uni-app中uni-easyinput组件和input组件，设置placeholder的color、font-size样式时，h5端样式表现不统一的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的，谢谢呢

在H5端，uni-easyinput组件和原生input元素的placeholder样式表现确实存在差异，这主要是由于两者的实现机制不同导致的。

原因分析：

  1. uni-easyinput是uni-app的扩展组件，内部通过结构封装实现，其placeholder样式通过placeholderStyle属性传递，最终会应用到内部生成的DOM元素上。
  2. 原生input的placeholder样式是通过::placeholder伪元素实现的，不同浏览器对伪元素样式的支持程度存在差异。

解决方案： 对于uni-easyinput组件，建议使用以下方式统一设置placeholder样式：

<uni-easyinput
  :value="value"
  placeholder="请输入名称"
  :inputBorder="false"
  class="custom-input"
/>

<style>
/* 统一设置placeholder样式 */
.custom-input ::v-deep .uni-easyinput__placeholder {
  color: #999999 !important;
  font-size: 28rpx !important;
}

/* 原生input的placeholder样式 */
input::placeholder {
  color: #999999;
  font-size: 28rpx;
}
</style>
回到顶部