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/

Bootstrap按钮高亮颜色不会改变

1 个答案: