Input ricerca bootstrap con pulsante accodato - Visualizzazione angoli arrotondati su tutti i lati

Question

Sto usando Twitter Bootstrap.

Ecco il numero a fiddle with my code. Ed ecco l'aperto Github Issue

---

ho implementato un ingresso di ricerca con un pulsante aggiunto, per the Bootstrap docs. Il mio HTML per la forma viene mostrato qui

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

Per qualche ragione, durante la visualizzazione del modulo sul cellulare (ad esempio iPhone 5) la casella di ricerca appare come mostrato nello screenshot qui sotto:

quando ho vista il modulo di ricerca in un browser desktop e ridimensionare a "dimensione mobile", compare la casella di ricerca correttamente come mostrato in questo secondo screenshot (disprezzo il confine e il formato di differenza leggero):

--------- DOMANDA ---------

Come posso impedire che l'input di ricerca di visualizzare in modo non corretto come nel primo screenshot? E cosa potrebbe causare questo? Ho esaminato la sorgente e gli stili calcolati per entrambi gli input di ricerca, e tutto sembra essere lo stesso. Aiuto?

Se cambio il input type="search" in type="text" il problema non esiste, quindi deve essere da qualche parte nel CSS, ma non riesco a capirlo. Quale CSS applica effettivamente questo effetto?

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

Se posso passare <div class="input-append">-<div class="input-prepend"> all'ingresso di ricerca visualizza in modo corretto. Inoltre, quando il campo è a fuoco, l'angolo arrotondato a destra diventa "quadrato" e appare correttamente.

Answer 1

Sembra che tu non possa. Vedere questo link

webkit html5 search inputs

citazione:

WebKit ha grandi limitazioni di tempo su cosa si può cambiare su un ingresso di ricerca. Direi che l'idea è la coerenza. In particolare, in Safari, i campi di ricerca hanno lo stesso aspetto della casella di ricerca nella parte superiore destra del browser. Il seguente CSS sarà ignorato in WebKit "non importa cosa", come in, non puoi nemmeno combatterlo con! Regole importanti.

In altre parole, Safari ignorerà i tuoi stili e applicherà l'aspetto standard.