CODEWITHSUNDEEP
csstwitter-bootstrap
Allan Jiang
Allan Jiang

Reputation: 11331

Bootstrap keep button other border gradient when removing border-left

I am using bootstraps input-group to display a box and a button. Like below:

enter image description here

I want to remove the left border of the button to make the search glyph looks like inside the input box.

Here's how it looks like after I make the change:

enter image description here

As you may notice when look closely, there's a little gradient line between the button and the input box, and the rest of the button borders doesn't look exactly the same as the inputbox borders.

Here's my CSS of the button:

.search-btn{
  border-left:0px solid transparent;
}

.search-input{
  border-right:0px solid transparent;
}

Please point me what else I should change to fix the above issue?

Thanks!

Upvotes: 0

Views: 392

Answers (1)

Tieson T.
Tieson T.

Reputation: 21191

Input elements in Bootstrap also have box-shadow. You can use Firebug to inspect the element, to see this. To demonstrate, here's the default markup for a search group (slightly tweaked, since I prefer Font Awesome to Glyphicons):

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search for..." />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>

And the same markup in a JSFiddle example: http://jsfiddle.net/6k9wb21t/

If we inspect the markup on the documentation page, we see this rule applied:

box-shadow: rgba(0,​ 0,​ 0,​ 0.075) 0px 1px 1px 0px inset

That rule is in place to make your input look like it has some depth, but it's applied to the entire perimeter of the input. The easiest fix is to remove the shadow:

.search-input
{
    box-shadow: none;
}

Here's the same JSFiddle with the rule applied: http://jsfiddle.net/6k9wb21t/1/

Upvotes: 2

Related Questions