Bootstrap form-group内多Input单边框聚焦失效问题求助

【已更新/待解决】我尝试在Bootstrap的form-group中为多个input设置仅显示单边框，但当前仅非聚焦状态和最后一个input的边框显示正常。我的需求是无论聚焦或非聚焦状态，单边框都能正常显示。

先看看你目前的实现代码：

现有CSS代码 #

.container{ margin-top:20px; width:80%; } 
.input-merge [class*="col-"]{ padding:0; } 
.form-control{ border-radius:0 !important; } 
.form-control:focus { position: relative; z-index: 1; } 
.input-merge div:not(:first-child) { margin-left: -1px; }

现有HTML代码 #

<head> 
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 
<body> 
  <div class="container"> 
    <div class="form-group input-merge"> 
      <div class="col-xs-4"> 
        <input type="text" class="form-control" placeholder="Input One"> 
      </div> 
      <div class="col-xs-4"> 
        <input type="text" class="form-control" placeholder="Input Two"> 
      </div> 
      <div class="col-xs-4"> 
        <input type="text" class="form-control" placeholder="Input Three"> 
      </div> 
    </div> 
  </div> 
</body>

问题原因分析 #

你当前的写法用margin-left: -1px让相邻input的边框重叠，但存在两个核心问题：

1. Bootstrap默认的.form-control:focus会添加box-shadow，这个阴影会超出input本身，被左侧的input遮挡，导致聚焦时边框看起来不完整；
2. 仅设置z-index:1的层级不够稳定，父容器没有相对定位时，z-index的作用范围可能不符合预期。

修复方案 #

我们调整CSS逻辑，直接去掉非第一个input的左边框，同时优化聚焦状态的样式：

.container{ 
  margin-top:20px; 
  width:80%; 
} 
.input-merge [class*="col-"]{ 
  padding:0; 
  position: relative; /* 确保子元素z-index基于父容器生效 */
} 
.form-control{ 
  border-radius:0 !important; 
} 
.form-control:focus { 
  box-shadow: none; /* 移除默认聚焦阴影，避免遮挡问题 */
  z-index: 2; /* 聚焦时提升层级，确保边框完整显示 */
  position: relative;
} 
/* 给非第一个input去掉左边框，直接实现单边框效果 */
.input-merge [class*="col-"]:not(:first-child) .form-control {
  border-left: none;
}

效果说明 #

这样修改后：

• 非聚焦状态下，所有input的边框自然衔接，没有重叠；
• 聚焦任意input时，因为移除了默认阴影且提升了层级，边框会完整显示，不会被相邻元素遮挡；
• 相比margin-left: -1px的方式，直接去掉左边框的布局更稳定，不会出现潜在的偏移问题。

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