h5中实现input的placeholder垂直居中显示
2020-10-14 本文已影响0人
跟着内心走
设计师在设计input的时候，往往会设计input里面有值和没有值时的字体不一样，比如下图
input
上图文字大小为72px，下图文字大小为48px，如果仅仅使用input的属性来设置css属性，无法达到设计效果，会出现placeholder文字偏下的问题，如下图：
fact
为了实现placeholder文字居中又不影响input输入文字的UI效果，于是，我给input的placeholder设置为空字符串，重新定义了一个div控件，这个div控件里面的内容填上所需要的placeholder的文字，通过监听input里面文字是否为空来隐藏和显示div里的文字内容，代码如下
<div v-show="money === ''" class="placeholder">请输入转入金额</div>
.placeholder{
position:absolute;
font-size:48px;
font-family:PingFangSC-Semibold;
color:rgba(204,204,204,1);
height:66px;
line-height:66px;
padding-top:47px;
padding-left:62px;
}
修改之后的显示效果如下：
success
