记录微信小程序修改input高度的坑

首先来修改input的高度

查看一下input的样式,直接修改height还是不够的,还需要修改min-height

.custom-input-class{
  width:100rpx;
  text-align: right;
  color:#FCC847;
  font-size:24rpx;
  height:30rpx;
  min-height:30rpx;
}

修改了高度还会有光标超出的问题,顺便把placeholder-class一起设置了

.custom-input-placeholder-class{
  height:30rpx;
  min-height:30rpx;
}

以上跟百度到到内容就是这样.重新编译一下发现

  input的内容不中了!!!!!

首先想到设置line-height. 不行!

使用flex解决问题(后面证实也是不行的)

 display: flex;
 align-items: center;

 

完美收工

 

以上处理都在模拟器上进行

真机跑一下.

android,iOS 都是同样情况.设置了flex之后偏上了

把flex去掉真机再跑一下就正常了,只是模拟器上不正常

结论

修改input高度只需要

  height:30rpx;
  min-height:30rpx;

设置到input到class 跟 placeholder-class 上即可