删除border-left时，Bootstrap保持按钮其他边框渐变

Question

我正在使用bootstraps input-group来显示一个框和一个按钮。如下所示：

我想删除按钮的左边框，使搜索字形看起来像在输入框内。

以下是我做出更改后的样子：

正如您在仔细观察时可能会注意到的那样，按钮和输入框之间有一条渐变线，其余按钮边框看起来与输入框边框完全相同。

这是我的按钮CSS：

.search-btn{
  border-left:0px solid transparent;
}

.search-input{
  border-right:0px solid transparent;
}

请指出我还应该修改以解决上述问题的其他方法吗？

谢谢！

Answer 1

Bootstrap中的输入元素也有box-shadow。您可以使用Firebug检查元素，以查看此内容。为了演示，这里是搜索组的默认标记（略微调整，因为我更喜欢Font Awesome到Glyphicons）：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search for..." />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>

JSFiddle示例中的相同标记：http://jsfiddle.net/6k9wb21t/

如果我们检查文档页面上的标记，我们会看到应用此规则：

box-shadow: rgba(0,​ 0,​ 0,​ 0.075) 0px 1px 1px 0px inset

该规则适用于使您的输入看起来有一些深度，但它适用于输入的整个边界。最简单的解决方法是删除阴影：

.search-input
{
    box-shadow: none;
}

以下是与应用规则相同的JSFiddle：http://jsfiddle.net/6k9wb21t/1/