Bootstrap FormGroup输入框仅在iOS系统中被遮挡、显示不全问题

核心原因 #

该问题是iOS Safari对type="search"类型的输入框存在默认样式扩展，加上盒模型计算、层级渲染逻辑和安卓/桌面端不一致导致的，可按以下步骤修改： #

可落地修改方案 #

• 重置iOS端表单默认样式：添加-webkit-appearance: none属性，取消Safari对搜索输入框的默认外观、内边距注入
• 修正盒模型配置：统一使用border-box确保设置的宽高包含内边距、边框，避免内容溢出父容器
• 调整高度设置：原18px的固定高度小于字体大小+默认边距的总高度，硬设会导致iOS渲染时内容溢出，可改为自适应高度+最小高度限制
• 层级优先级调整：给输入框设置相对定位和更高的z-index，避免被前置的搜索按钮元素遮挡
• 推荐将父表单改为flex布局，从根源避免浮动/定位带来的元素重叠问题
• 如果搜索框为fixed吸顶布局，可给外层.search-div添加transform: translateZ(0);属性，强制开启GPU渲染，避免iOS虚拟键盘弹出时导致的布局偏移遮挡

修改后代码示例 #

调整后的CSS代码 #

/* 父表单增加flex布局，适配多端 */
.form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}
.search-button {
  flex-shrink: 0; /* 禁止按钮被压缩 */
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
}
.search-input {
  flex-grow: 1; /* 自适应占满剩余宽度，替代原来的calc计算，兼容性更好 */
  min-height: 36px;
  box-sizing: border-box;
  padding: 0 12px;
  /* 核心：重置iOS默认样式 */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 36px;
  border: 0;
  outline: 0;
  background-color: #FFFFFF !important;
  /* 提升层级避免被遮挡 */
  position: relative;
  z-index: 2;
}

如果不想修改原有布局逻辑，只需要在原.search-input样式中补充以下代码即可：

.search-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  border-radius: 0;
}

内容的提问来源于stack exchange，提问作者gokublack