小程序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不垂直居中的问题

相关推荐
CHU72903518 小时前
安心陪伴,便捷就医:陪诊代办小程序的温暖设计
前端·小程序·php
CHU72903519 小时前
线上扭蛋机拆盒小程序前端功能版块解析
前端·小程序·php
深海蓝山1 天前
基于Canvas的原生签名组件,兼容小程序和H5
小程序·canvas·签名
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序的课程表信息系统的开发实现为例,包含答辩的问题和答案
微信小程序·小程序
CHU7290351 天前
线上美容预约小程序:开启便捷美肤新方式
小程序
编程、小哥哥1 天前
物业小程序(业主端+物业端)功能逻辑图与原型图
小程序
Goona_1 天前
PyQt+Excel学生信息管理系统,增删改查全开源
python·小程序·自动化·excel·交互·pyqt
郑州光合科技余经理1 天前
O2O上门预约小程序:全栈解决方案
java·大数据·开发语言·人工智能·小程序·uni-app·php
weixin_177297220691 天前
旧物回收新风尚,绿色生活新篇章——小程序引领环保新潮流
小程序·生活