如何为搜索按钮实现预期点击效果，可使用Bootstrap、CSS、JS方案

实现方案 #

核心思路是将整个搜索栏作为一个整体控制样式，而非给每个子元素单独设置圆角和边框，配合focus-within伪类实现整体激活效果：

修改后的CSS代码

/* 父容器统一控制基础样式 */
.loc-bar {
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
/* 输入框激活时父容器整体展示高亮效果 */
.loc-bar:focus-within {
  /* 外发光参数可根据目标效果调整颜色、大小 */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.loc-icon{
  background-color: transparent;
  border: none;
  padding: 15px;
}

.loc-input{
  border: none;
  padding: 15px;
  background-color: transparent;
  /* 覆盖Bootstrap默认的输入框激活样式 */
  box-shadow: none !important;
  outline: none !important;
}

.loc-submit{
  background-color: transparent;
  border: none;
  padding-right: 1rem;
}
.loc-submit:focus, .loc-submit:active {
  outline: none;
  box-shadow: none;
}

HTML优化建议

原有代码中按钮嵌套链接的写法不符合HTML规范，会导致交互冲突，可修改为直接用链接替代按钮：

<div class="input-group mb-3 loc-bar">
    <span class="input-group-text loc-icon" id="inputGroup-sizing-default"><img src="Images/place.png" alt="位置图标"></span>
    <input type="text" class="form-control loc-input" aria-describedby="inputGroup-sizing-default" placeholder="Enter your location">
    <a href="/" class="loc-submit d-flex align-items-center"><img src="Images/right-arrow.png" alt="提交"></a>
</div>

修改后整个搜索栏为完整的圆角区块，点击输入框激活时会整体展示外发光高亮效果，和目标效果一致。

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