Wejście wyszukiwania Bootstrap z dołączonym przyciskiem - wyświetlanie zaokrąglonych narożników na wszystkich stronach

Question

Używam Twitter Bootstrap. Jest to . A oto otworzyły Github Issue

---

I wprowadziły wejście wyszukiwaniu z załączonym przycisku, per the Bootstrap docs. My HTML dla formy jest pokazany tutaj

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

Z jakiegoś powodu, podczas przeglądania formularza na ruchomej (tj iPhone 5) pojawi się okno wyszukiwania, jak wyświetlane na poniższym zrzucie ekranu:

Kiedy przeglądam formularz wyszukiwania w przeglądarce na komputerze i to na „wielkość mobile”, pojawi się okno wyszukiwania poprawnie, jak pokazano w tym drugim zrzucie rozmiaru (lekceważenie zapalniczki granicznej i wielkość różnicy):

--------- PYTANIE ---------

Jak mogę zapobiec wyświetlaniu wejście wyszukiwarki niepoprawnie jak w pierwszym zrzucie? A co może być przyczyną tego? Przyjrzałem się źródłowym i wyliczonym stylom dla obu wejść wyszukiwania i wszystko wydaje się być takie samo. Wsparcie?

Jeśli zmienię input type="search" na type="text" problem nie istnieje, więc musi znajdować się gdzieś w CSS, ale nie mogę tego rozgryźć. Co CSS faktycznie stosuje ten efekt?

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

Gdybym przełączyć <div class="input-append"> do <div class="input-prepend"> wejście wyszukiwania wyświetlane poprawnie. Ponadto, gdy pole jest ostre, zaokrąglony róg po prawej stronie zmienia się na "kwadratowy" i wyświetla się poprawnie.

Answer 1

Wygląda na to, że nie możesz. Zobacz ten link

webkit html5 search inputs

cytat:

WebKit ma duże ograniczenia czasowe dotyczące tego, co można zmienić na wejście wyszukiwania. Zgaduję, że pomysł jest spójny. W Safari szczególnie pola wyszukiwania wyglądają tak jak pole wyszukiwania w prawym górnym rogu przeglądarki. Następujące pliki CSS będą ignorowane w WebKit "bez względu na wszystko", ponieważ nie można nawet walczyć z nimi za pomocą ważnych reguł.

Innymi słowy, Safari zignoruje Twoje style i zastosuje standardowy wygląd.