解决input标签在ios中光标不居中问题，同时兼容安卓

最新推荐文章于 2024-01-25 15:23:45 发布

又又呢

最新推荐文章于 2024-01-25 15:23:45 发布

阅读量1k

点赞数

分类专栏：移动端 web 文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_42050203/article/details/106903601

版权

web 同时被 2 个专栏收录

7 篇文章

订阅专栏

移动端

6 篇文章

订阅专栏

1、首先input的所有父级元素不能加 line-height 属性;

2、初始化input样式 line-height:normal;

3、要想光标不撑满这个input狂，加一个上下边框

4、代码如下，有需要的小伙伴可以试试：

Html：

<div class="head-search-item">

      <input type="text"placeholder="请输入商品/店铺名称">

      <div class="icon">

        <svg-icon icon-class="icon_search" />

      </div>

</div>

Css：

.head-search-item{

    width:100%;

    height: 72px;

    border-radius: 36px;

    background: #f7f7f7;

}

.head-search-item input{

    width:100%;

    height: 100%;

    font-size: 0.32px;

    padding: 15px 20px;

    border: 0;

    background: transparent;

    line-height: normal;

}

5、效果如下：