Multiple .input-group-btn border-radius is set incorrectly
Created by: davispw
When more than one .input-group-btn is included in an .input-group, all but the last button retain their rounded borders.
Bug is on line 3950 of bootstrap.css (version 3.0.2):
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child), /* missing >.btn here! */
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-btn does not have a border itself, so setting border-radius on it is bogus. Selector needs > .btn
.
I have a legitimate case for an input with two buttons: "lookup" and "create new".
http://plnkr.co/edit/N3dnJcuERdOaIBmdxCJO?p=preview
<div class="input-group">
<input name="customerId" type="text" class="form-control"
placeholder="Customer ID" />
<span class="input-group-btn">
<button class="btn btn-primary" title="Search for customers">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
<span class="input-group-btn">
<button class="btn btn-warning" title="Create new customer">
<i class="glyphicon glyphicon-file"></i>
</button>
</span>
</div>
Here's the workaround/fix:
.input-group-btn:not(:first-child):not(:last-child) >.btn {
border-radius: 0;
}
I believe this is a separate issue than #9025 (closed), which refers to borders being doubled, as the CSS shown above is clearly just wrong.