Search Input with input-append has 4 rounded corners rather than 2.

[adamdehaven]

I posted this issue to Stack Overflow as well. I have implemented a search input with an appended button, per the Bootstrap docs. My HTML for the form is shown here:

`

`

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

When I view the search form in a desktop browser and resize it to "mobile size," the search box appears correctly.

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?

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.

[mdo]

Styling search inputs is basically impossible. Sorry, but you'll have to use a regular text input if you want the styling control.

[adamdehaven]

Just curious - if I use the input-prepend instead of input-append, the element displays correctly. Shouldn't that mean that the styling IS working, but not for the input-prepend class?

[mfishma]

If this helps anyone else, I just learned you can use standard styling with

    input[type=search] {
       -moz-appearance:none;
       -webkit-appearance:none;
    }

the rounded corners are just trying to be consistent with iOS/OS X styling