input-group-addon/ font-awesome textbox with grouped icon has messy borders

Question

Using bootstrap 3, this is the code:

<div class="form-group">
 <div class="input-group merged">
  <span class="input-group-addon"><i class="fa fa-arrow-circle-right fa-fw"></i></span>
  <input class="form-control" placeholder="Text to appear before..">
 </div>
</div>

<div class="form-group">
 <div class="input-group merged">
  <input class="form-control" placeholder="Text to appear after..">
  <span class="input-group-addon"><i class="fa fa-arrow-circle-left fa-fw"></i></span>
 </div>
</div>

EDIT: (adding css code at Sean's request):

.merged .input-group-addon {
    border-right: 0px;
    background-color: #FFFFFF;
}
.merged input {
    border-left: 0px;
    background-color: #FFFFFF;
}

And this is how it looks:

Note that the left and right borders of the second input box are missing. Also, there's a vertical divider between the icon and the textbox, which isn't there in the upper box.

Any ideas?

Answer 1

.input-group-addon {
    background-color: #fff;
}
.merged input:first-child {
    border-right: 0px;
}
.merged .input-group-addon + input {
    border-left: 0px;
}

http://bootply.com/91386

So what we are doing here is saying the following:

If the input is the first child element of .merged, remove the right border.

If the input is a sibling of .input-group-addon and comes right after it, remove the left border.