CODEWITHSUNDEEP
csstwitter-bootstrap-3
John Deck
John Deck

Reputation: 899

Bootstrap 3 border radius missing in input-group

Using Bootstrap 3.4 why the input-group missing all border radius ?

<form action="{{ route('dashboard.users.index') }}" method="get">
   <div class="input-group">
        <input type="text" name="search" class="form-control">
        <span class="input-group-btn">
           <button class="btn btn-default" type="submit">
             <i class="fa fa-search"></i>
           </button>
         </span>
     </div>
</form>

inspect element:

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

Should I fix it with my own css?

Upvotes: 2

Views: 3122

Answers (2)

John Deck
John Deck

Reputation: 899

I'm using bootstrap rtl and i put it accidentally before the original bootstrap.min.css .. when the order changed .. the problem fixed .. thank you for helping

Upvotes: 2

AlbertK
AlbertK

Reputation: 13217

It looks like it is by design. See an image (I used your markup, just added inner text into <i class="fa fa-search"></i>): enter image description here

You have two inputs in a row. Outside corners have border-radius but inner corners don't have. And it looks pretty good. If you need to override that behavior you need to create you own css that will override default styles.

Upvotes: 2

Related Questions