html - Bootstrap 按钮高亮颜色不会改变

Question

所以我想在我的表单上创建一个搜索栏。但是，每当我将鼠标悬停在搜索图标上时，右侧的边框就会拒绝与其他 3 边一起改变。当按钮被聚焦时，问题是一样的。我花了很长时间修改 CSS，认为 z-index 可能是相邻文本框的问题。不用说，那个和我的其他尝试都没有解决问题。

这是 jsfiddle 的链接:http://jsfiddle.net/52VtD/6137/

有问题的代码:

<div class = "container-fluid">
        <div class = "row">
          <div class = "col-xs-12 col-sm-12 col-md-4 col-md-offset-4">
            <label>
              <div class="input-group">
                <span class="input-group-btn">
                    <button class = "btn btn-default no-outline" id = "customSearchButton" type = "button"><i class="glyphicon glyphicon-search"></i></button>
                </span>
                <input type="text" class="form-control" placeholder="Search SRGs...">
              </div>
            </label>
          </div>
        </div>
      </div><!-- .container-fluid -->

如果有办法解决这个问题，请告诉我。谢谢!

Answer 1

搜索按钮似乎被其右侧的元素覆盖了。这是一个解决方案，只需在文本框中添加 1px 边距即可:

.form-control {
    margin-left: 1px;
}

http://jsfiddle.net/ftfYD/

z-index 也可以:

#customSearchButton {
    /*...*/
    z-index: 3;
}

如果你看http://getbootstrap.com/dist/css/bootstrap.css您可以看到 .form-control 将其 z-index 设置为 2，因此搜索按钮上的 3+ 将使其显示在其顶部。

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

http://jsfiddle.net/52VtD/6138/