css - Bootstrap 在移除 border-left 时保留按钮其他边框渐变

Question

我正在使用 Bootstrap 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/