iOS 平台上 input 光标高度与父盒子相同,如何调整?

作者站长头像
站长
· 阅读数 15

input 输入框光标,在安卓手机上显示没有问题,但是在苹果手机上,当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是 ios 的 input 光标。

iOS 平台上 input 光标高度与父盒子相同,如何调整?

回复
1个回答
avatar
test
2024-06-18

根据你提出的问题,我分析问题的原因大致如下:

通常我们习惯用 height 属性设置行间的高度和 line-height 属性设置行间的距离(行高),当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于 input 的 line-height 的值,当有内容时,光标从 input 的顶端到文字的底部。

所以有效的解决方法应该,高度 height 和行高 line-height 内容用 padding 撑开。

示例代码如下:

 .content{
      float: left;
      box-sizing: border-box;
      height: 88px;
      width: calc(100% - 240px); 
      .content-input{
        display: block;
        box-sizing: border-box;
        width: 100%;
        color: #333333;
        font-size: 28px;
        //line-height: 88px;
        padding-top: 20px;
        padding-bottom: 20px;
      }
     } 
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容