快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

如何解决ios手机中input输入框光标过长的问题

这篇文章主要为大家展示了“如何解决ios手机中input输入框光标过长的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决ios手机中input输入框光标过长的问题”这篇文章吧。

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的珠晖网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

在项目中做移动端页面,发现IOS 的光标大小很大,和安卓的完全不一样,思考怎么调整大小,通过实践和尝试,找到了解决方法,现分享给大家。

修改前css部分代码:

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

修改后css部分代码:

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

Android和iOS手机修改前后的效果:

如何解决ios手机中input输入框光标过长的问题

如何解决ios手机中input输入框光标过长的问题

其实,只是调整了line-height的大小,就解决了iOS和Android手机input光标大小不一致的问题。

以上是“如何解决ios手机中input输入框光标过长的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页题目:如何解决ios手机中input输入框光标过长的问题
URL分享:http://6mz.cn/article/ggdcps.html

其他资讯