[Issue Resolved]
I have been working on setting a single border between multiple inputs inside a form-group in Bootstrap. Currently, the border is only visible when the input is not focused and it is the last one. However, my expectation is for the border to be visible both when the input is focused and not.
.container{
margin-top:20px;
width:80%;
}
.input-merge [class*="col-"]{
padding:0;
}
.form-control{
border-radius:0 !important;
}
.form-control:focus {
position: relative;
z-index: 1;
}
.input-merge div:not(:first-child) {
margin-left: -1px;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="form-group input-merge">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Input One">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Input Two">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Input Three">
</div>
</div>
</div>
</body>Any suggestions on how to fix this issue? Thank you.