移動端placeholder不能垂直居中解決方案


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM