表单提交按钮border-radius未生效问题求助

问题核心是**#search-form的overflow: hidden属性**会裁剪按钮超出表单高度的部分，包括左侧圆角；同时表单与按钮高度不匹配，也加剧了圆角被遮挡的问题。按以下修改即可解决：

修改后的完整代码 #

CSS 代码 #

#search-content {
  display: flex;
}

#search-form {
  border: 1px solid #F2F2F2;
  border-radius: 13px;
  /* 移除overflow:hidden，避免裁剪按钮圆角 */
  /* overflow: hidden; */
  height: 49px; /* 统一为按钮的高度 */
  display: flex; /* 用flex实现内部元素垂直对齐 */
  align-items: center;
}

#location-icon {
  padding: 15px;
  border-radius: 5px 0px 5px 0px;
  background-color: #F2F2F2;
}

#search-input {
  border-width: 0px;
  flex: 1; /* 让输入框占满剩余空间 */
  padding: 0 10px; /* 添加内边距优化输入体验 */
  outline: none; /* 去掉默认聚焦边框 */
}

#search-button {
  color: #fff;
  background-color: #0065FC;
  /* 只保留右侧圆角，贴合表单整体样式 */
  border-radius: 0 13px 13px 0;
  border-width: 0px;
  height: 49px;
  width: 40px;
  cursor: pointer;
  margin-right: -1px; /* 抵消表单右侧边框宽度，实现无缝衔接 */
}

HTML 代码（无需调整） #

<script src="https://kit.fontawesome.com/1f544e41e8.js" 
        crossorigin="anonymous"></script>
<div id="search-content">
  <form id="search-form">
    <i id="location-icon" class="fa-solid fa-location-dot"></i>
    <input id="search-input" type="text" placeholder="Marseille, France" />
    <button id="search-button" type="submit">
      <i class="fa-solid fa-magnifying-glass"></i>
    </button>
  </form>
</div>

关键修改说明 #

1. 移除#search-form的overflow: hidden：停止裁剪按钮超出表单的部分，保证圆角完整显示
2. 统一表单与按钮高度：避免因高度差导致的圆角遮挡
3. 给表单添加flex布局：让内部元素自动垂直居中，布局更规整
4. 调整按钮圆角方向：仅保留右侧圆角，与表单整体样式匹配
5. 按钮添加负margin：抵消表单右侧边框宽度，实现按钮与表单的无缝衔接

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