Fix border-radius of form-control within input-group-append/input-group-prepend

The border-radius is wrong when form-control is inside the input-group-append or input-group-prepend:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <select class="form-control">
      <option>years ago</option>
      <option>months ago</option>
      <option>weeks ago</option>
      <option>days ago</option>
    </select>
  </div>
</div>

result:

I think this should be added to _input-group.scss:

.input-group > .input-group-prepend > .form-control,
.input-group > .input-group-append:not(:last-child) > .form-control {
    @include border-right-radius(0);
}

.input-group > .input-group-append > .form-control,
.input-group > .input-group-prepend:not(:first-child) > .form-control {
  @include border-left-radius(0);
}

result:

[mdo]

The statement stands; that’s not what those classes are intended to do, and we won’t explicitly support that behavior. You can, however, set width: auto (or soon, .w-auto) on elements to reset this. The required HTML and CSS for these component is super tricky, it does limit what we can do.

[hafezd]

@mdo It doesn’t work with width: auto but works with flex: 0 0 auto; width:auto. I think we should wait for w-auto.