Bootstrap Search Input with Appended Button - Displaying Rounded Corners on All Sides [duplicate]

Question

I'm using Twitter Bootstrap.

Here's a fiddle with my code. And here's the opened Github Issue

---

I have implemented a search input with an appended button, per the Bootstrap docs. My HTML for the form is shown here

<form class="form-search text-center" method="get" action="#">
  <div class="input-append">
    <input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1">
    <button type="submit" class="btn"><i class="icon-search icon-large"></i> </button>
  </div>
</form>

For some reason, when viewing the form on mobile (i.e. iPhone 5) the search box appears as displayed in the screenshot below:

When I view the search form in a desktop browser and resize it to "mobile size," the search box appears correctly as shown in this second screenshot (disregard the lighter border and size difference):

--------- QUESTION ---------

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?

If I change the input type="search" to type="text" 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?

--------- UPDATE ---------

If I switch <div class="input-append"> to <div class="input-prepend"> the search input displays correctly. Also, when the field has focus, the rounded corner on the right turns "square" and appears correctly.

Answer 1

Looks like you can not. See this link

webkit html5 search inputs

quote:

WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit "no matter what", as in, you can't even fight against it with !important rules.

In others words, Safari will ignore your styles, and apply the standard look.