Solve the problem of too long cursor in input box of IOS mobile phone

Time:2019-10-7

In the project to do mobile terminal page, found that the cursor of IOS is very large, and it is completely different from that of the user. How to adjust the size can be solved by practice and try.

Before modifying the code of the CSS part:


.receiving-info .receiving-info-list input {
 display: inline-block;
 width: 70%;
 font-size: 14px;
 color: #333;
 border: none;
 outline: none;
 line-height: 50px; 
}

Modified CSS code:


.receiving-info .receiving-info-list input {
 display: inline-block;
 width: 70%;
 font-size: 14px;
 color: #333;
 border: none;
 outline: none;
 line-height: 20px; 
}

Before and after the modification of Android and iOS phones,

In fact, only adjusting the size of line-height solves the problem of inconsistent cursor size of iOS and Android mobile input.

summary

The above is a small introduction to solve the problem of too long cursor in the input input box of IOS mobile phone. I hope it will help you. If you have any questions, please leave a message for me. Thank you very much for your support to developpaer.