title: Bootstrap Search Input with Appended Button - Displaying Rounded Corners on All Sides
body: <p>I'm using <a href="http://twitter.github.com/bootstrap/index.html" rel="nofollow noreferrer">Twitter Bootstrap</a>.</p>
  
  <p>Here's <a href="http://jsfiddle.net/adamdehaven/wQ2s5/1/" rel="nofollow noreferrer">a fiddle with my code</a>. And here's the opened <a href="https://github.com/twitter/bootstrap/issues/7411" rel="nofollow noreferrer">Github Issue</a></p>
  
  <hr>
  
  <p>I have implemented a search input with an appended button, <a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="nofollow noreferrer">per the Bootstrap docs</a>. My <code>HTML</code> for the form is shown here</p>
  
  <pre><code>&lt;form class="form-search text-center" method="get" action="#"&gt;
    &lt;div class="input-append"&gt;
      &lt;input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1"&gt;
      &lt;button type="submit" class="btn"&gt;&lt;i class="icon-search icon-large"&gt;&lt;/i&gt; &lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>For some reason, when viewing the form on mobile (i.e. iPhone 5) the search box appears as displayed in the screenshot below:
  <img src="https://i.stack.imgur.com/7dbMR.jpg" alt="Bootstrap Search input append with rounded corners"></p>
  
  <p>When I view the search form in a desktop browser and resize it to "mobile size," the search box appears <strong>correctly</strong> as shown in this second screenshot (<em>disregard the lighter border and size difference</em>):</p>
  
  <p><img src="https://i.stack.imgur.com/Wu9nW.png" alt="Bootstrap search input on desktop"></p>
  
  <p>--------- <strong>QUESTION</strong> ---------</p>
  
  <p>How can I prevent the search input from displaying incorrectly as in the first screenshot? And what could be causing this? I've looked at the source and computed styles for both search inputs, and everything appears to be the same. Help?</p>
  
  <p>If I change the <code>input type="search"</code> to <code>type="text"</code> the problem does not exist, so it's got to be somewhere in the CSS, but I can't figure it out. What CSS actually applies this effect?</p>
  
  <p>--------- <strong>UPDATE</strong> ---------</p>
  
  <p>If I switch <code>&lt;div class="input-append"&gt;</code> to <code>&lt;div class="input-prepend"&gt;</code> the search input displays correctly. Also, when the field has focus, the rounded corner on the right turns "square" and appears correctly.</p>