Invert selectors in input group

Created by: vicary

I am using Chrome 45.0.2454.10.

This issue persists in v3 and v4, when an input group contains only one <input type="text" class="form-control"/> element, it would lost the 100% width and renders all four corners without radius.

Another problem about the selector is when I add more than one addon at the same side, only :first-child and :last-child removes the border of the opposite side.

See this plunker for a demo.

This issue can be fixed by,

1. Adding width: 100% to .input-group.
2. Flipping :first-child selectors to :not(:last-child) in .form-control, .input-group-addon and .input-group-btn under .input-group
3. Flipping :last-child selectors to :not(:first-child) in .form-control, .input-group-addon and .input-group-btn under .input-group

Not sure if this introduces other issues, any ideas?