小程序input的placeholder不垂直居中的问题解决

input的placeholder不垂直居中,input设置高度后,使用line-height只能使输入的文字垂直居中,但是placeholder不会居中,反而会偏上。

  1. 首先placeholder样式自定义

有两种方法,第一种行内样式:

html 复制代码
<input type="text" placeholder="姓名" placeholder-style="font-size:28rpx;color:#999999;" />

第二种加类名:

给input加上placeholder-class属性,然后给该属性 设置一个类名,在style中设置样式。

html 复制代码
<input  type="text"  placeholder="地址" placeholder-class="address"/>
 <style>
 	.address{
		color: red;
	}
 </style>

placeholder的字体颜色都能改变,但是仍然不会在input框里垂直居中,一直偏上,查了很多方法都不管用,比如:

"

比如:

能垂直居中是能,但是input框变得没有内边距了,很不好看。

  1. 最后找到解决办法了:

在placeholder上增加pandding-top,把提示文字顶下来

参考:IOS下input的placeholder不垂直居中的问题

相关推荐
低代码布道师2 小时前
加油站小程序实战教程04类目级联选择
低代码·小程序
狼性书生2 小时前
uniapp vue3实现的一款数字动画调节器件,支持长按、单点操作,提供丝滑的增减动画效果
前端·vue.js·微信小程序·小程序·uni-app
Luckysec3 小时前
微信小程序源码逆向 MacOS
macos·微信小程序·小程序·渗透测试·wxappunpacker
萧寂1738 小时前
微信小程序自定义轮播图指示点样式
微信小程序·小程序
R_yy17 小时前
微信小程序开发——视频播放实现(本地视频或者云端视频均可)
前端·微信小程序·小程序
低代码布道师21 小时前
加油站小程序实战教程03站点管理
低代码·小程序
V+zmm101341 天前
智慧物流小程序(论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计
霍格沃兹测试开发学社测试人社区1 天前
性能测试丨微信小程序性能优化指南
性能优化·微信小程序·小程序
猿毕设1 天前
【FL0100】基于SSM微信小程序的走失人员的报备平台
java·spring boot·后端·python·微信小程序·小程序
猿毕设1 天前
【FL0091】基于SSM和微信小程序的社区二手物品交易小程序
java·spring boot·后端·python·微信小程序·小程序