Bootstrap-Sucheingabe mit angehängter Schaltfläche - Anzeigen von abgerundeten Ecken auf allen Seiten

Question

Ich verwende Twitter Bootstrap.

Hier ist a fiddle with my code. Und hier ist der Github Issue geöffnet

---

ich eine Sucheingabe mit einem nachgestellten Schaltfläche implementiert haben, per the Bootstrap docs. Mein HTML für das Formular ist hier

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

Aus irgendeinem Grunde gezeigt, beim Betrachten der Form auf mobilem (dh iPhone 5) das Suchfeld angezeigt wird, wie unten im Screenshot angezeigt:

Wenn ich sehe das Suchformular in einem Desktop-Browser und Größe ändern „mobile Größe“, um das Suchfeld erscheint richtig wie in diesem zweiten Screenshot (Mißachtung der leichtere Grenze und Größendifferenz) gezeigt:

--------- FRAGE ---------

Wie kann ich die Sucheingabe falsch wie im ersten Screenshot von Anzeigen verhindern? Und was könnte das verursachen? Ich habe mir die Quelle und die berechneten Stile für beide Sucheingaben angeschaut, und alles scheint identisch zu sein. Hilfe?

Wenn ich die input type="search" zu type="text" ändern, existiert das Problem nicht, also muss es irgendwo in der CSS sein, aber ich kann es nicht herausfinden. Welche CSS wendet diesen Effekt tatsächlich an?

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

Wenn ich <div class="input-append">-<div class="input-prepend"> der Sucheingabeschalter korrekt angezeigt. Wenn das Feld scharf ist, wird die abgerundete Ecke rechts "quadratisch" und erscheint korrekt.

Answer 1

Sieht aus wie Sie nicht können. Siehe den Link

webkit html5 search inputs

Zitat:

WebKit hat große Zeit Beschränkungen auf, was Sie auf einer Sucheingabe ändern. Ich denke, die Idee ist Konsistenz. Insbesondere in Safari sehen Suchfelder genau wie das Suchfeld oben rechts im Browser aus. Die folgenden CSS werden in WebKit "egal was" ignoriert, wie in, Sie können nicht einmal dagegen mit! Wichtigen Regeln kämpfen.

Mit anderen Worten, Safari ignoriert Ihre Stile und wendet das Standard-Aussehen an.