Attach twitter to the bootstrap search box and search button and hover over the right side of the search button

Here is my bootstrap code

 <div class="input-append" align="center" > 
           <input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"/> 

           <button type="submit" class="btn">Search</button> 

        </div>

      

Here is a jsfiddle

Is there a way to join the search box and search button and also direct the right side of the button Search

+3


source to share


2 answers


Class css, which controls key border-radius

search button .form-search .input-append .btn

. To apply this class, add a shape or div surrounding the div input-append

with this class.

Like this:



<div class="form-search">
 <div class="input-append"> 
  <input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"/><button type="submit" class="btn">Search</button> 
 </div>
</div>

      

Here's a link to the documentation and here's an update to your jsFiddle .

+3


source


Just add this.



input.search-query {
    -moz-border-top-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;

    -moz-border-bottom-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}

      

0


source