h5中实现input的placeholder垂直居中显示

设计师在设计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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容