zl程序教程

您现在的位置是:首页 >  工具

当前栏目

移动端placeholder不能垂直居中解决方案

解决方案 移动 不能 居中 垂直 placeholder
2023-09-27 14:26:44 时间

1.问题描述


问题如图:手机端placeholder文字偏上,垂直方向不居中,input光标显示偏上
解决IE下不支持placeholder属性

2.解决方案


  • css
 .phoneNumber input {

                width: 100%;
                font-size: .34rem;
                display: inline-block;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                font-family: PingFang-SC-Regular;
                border: 1px solid #68be4c;
                border-radius: .1rem;
                text-indent: .4rem;
                color: #333;
                padding: .16rem 0;
                float: left;
            }
  • html
``` <div class="phoneNumber"> <input type="text" placeholder="输入手机号码" /> </div> ```

3.成果

问题完美解决,placeholder文字完美居中,光标显示正常

原文地址:https://segmentfault.com/a/1190000015185065