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,
- Adding
width: 100%
to.input-group
. - Flipping
:first-child
selectors to:not(:last-child)
in.form-control
,.input-group-addon
and.input-group-btn
under.input-group
- 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?