CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
Abu Ayyub
Abu Ayyub

Reputation: 411

Multiple Input element with one border in Bootstrap

[Updated/Solved]

I am trying to set one border between multiple input inside form-group in bootstrap, but the border only working if not focus and the last input. My Expectation the border work both focus and not focus.

.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>

How to fix that? Thanks.

Upvotes: 1

Views: 428

Answers (1)

Bart
Bart

Reputation: 121

You can add the following to your css;

.form-control:focus { position: relative; z-index: 1; }

It puts the focused input above the others. Therefore the focus outline (glow) will be completely visible.

Upvotes: 1

Related Questions