Search for boot buffer with added button - display rounded corners on all sides

Question

I am using Twitter Bootstrap .

Here is the fiddle with my code . And here is the open Github Issue

---

I have implemented a search entry with an added button, for 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 a form on a mobile phone (i.e. iPhone 5), a search box appears, as shown in the screenshot below:

When I look at the search form in the desktop browser and resize it to “mobile size”, the search window displays correctly , as shown in this screenshot (do not pay attention to the lighter border and the difference in size):

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

How can I prevent the input from being displayed incorrectly for search, as in the first screenshot? And what could be the reason for this? I looked at the source and calculated styles for both search inputs, and everything seems to be the same. Help?

If I change input type="search" to type="text" , the problem does not exist, so it should be somewhere in CSS, but I cannot figure it out. What does CSS really apply this effect?

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

If I switch <div class="input-append"> to <div class="input-prepend"> , the search will display correctly. In addition, when the field has focus, the rounded corner on the right rotates the “square” and displays correctly.

Answer 1

Sounds like you can't. See This Link

webkit html5 input search

quote:

WebKit has great time limits on what you can change on the search tab. I guess the idea is consistency. In Safari, in particular, the search fields look the same as the search field in the upper right corner of the browser. The following CSS will be ignored in WebKit “no matter what,” as in, you cannot even deal with important rules.

In other words, Safari ignores your styles and applies a standard look.