đầu vào-group-addon/hộp font-tuyệt vời với biểu tượng nhóm có biên giới lộn xộn

Question

Sử dụng bootstrap 3, đây là đoạn 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: (thêm mã css theo yêu cầu của Sean):

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

Và đây là cách có vẻ:

Lưu ý rằng đường viền trái và phải của hộp nhập thứ hai bị thiếu. Ngoài ra, có một dải phân cách dọc giữa biểu tượng và hộp văn bản, không có trong hộp phía trên.

Bất kỳ ý tưởng nào?

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

Vì vậy, những gì chúng ta đang làm ở đây là nói như sau:

Nếu đầu vào là yếu tố con đầu lòng của .merged, loại bỏ các biên giới đúng.

Nếu đầu vào là anh chị em của .input-group-addon và đến ngay sau đó, hãy xóa đường viền trái.