6

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: Bootstrap Search input append with rounded corners

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):

Bootstrap search input on desktop

--------- 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.

adamdehaven
  • 5,890
  • 10
  • 61
  • 84
  • This is NOT a duplicate - I do not want to turn off input rounding as suggested in the alternate post. I want the form input to display CORRECTLY per my screenshots. – adamdehaven Mar 28 '13 at 12:51
  • Added the Github Issue – adamdehaven Mar 28 '13 at 13:08
  • @Adam: If you want the input displayed without rounding, doesn't that mean that you want to turn input rounding off for that input? – sth Mar 31 '13 at 15:21
  • @sth: No, I just want the rounding off next to the appended button as shown in the second screenshot. – adamdehaven Apr 01 '13 at 11:56

1 Answers1

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.

vals
  • 61,425
  • 11
  • 89
  • 138
  • This is not correct. Safari for Mc uses the same WebKit engine as Safari for iOS, and the search input renders correctly in Safari on my Mac. – adamdehaven Mar 29 '13 at 13:08
  • Well, it's not my opinion, I just quoted it. CSS tricks is usually well informed, even though the link is old. – vals Mar 29 '13 at 14:03