ブートストラップ検索追加ボタン付き入力 - 四角い角を表示

Question

私はTwitter Bootstrapを使用しています。

ここにはa fiddle with my codeです。そして、ここで私が追加ボタン、per the Bootstrap docsで検索入力を実装している

---

Github Issueを開いたのです。マイHTMLフォームのは、何らかの理由でここに

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

示され、以下のスクリーンショットに表示されているように検索ボックスが表示され、モバイル（つまり、iPhone 5）上のフォームを表示するとき：

は私が見ますデスクトップブラウザでの検索フォームこの第2のスクリーンショットに示すように、それは「モバイルサイズは、」検索ボックスが正しくを表示されてサイズ変更（無視軽いボーダーやサイズ違い）：

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

どのように私は、最初のスクリーンショットのように、誤って表示さからの検索入力を防ぐことができますか？これを引き起こす原因は何か？私は両方の検索入力のソースと計算されたスタイルを調べましたが、すべてが同じように見えます。助けて？

input type="search"をtype="text"に変更すると、問題は存在しないため、CSSのどこかにあるはずですが、わかりません。 CSSが実際にこの効果を適用するのは何ですか？私は<div class="input-prepend">に<div class="input-append">を切り替えると

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

は、検索入力が正しく表示されます。また、フィールドにピントが合っていると、右の角が丸くなり、正しく表示されます。

Answer 1

そうは見えません。

WebKitを使用すると、検索入力に変更することができます上の大きな時間の制限があります。

webkit html5 search inputs

の引用は、このリンクを参照してください。私はアイデアが一貫していると思います。特にSafariでは、検索フィールドはブラウザの右上にある検索ボックスのように見えます。次のCSSはWebKitでは無視されますが、重要なルールではそれと闘うことさえできません。

他の言葉で言えば、Safariはあなたのスタイルを無視し、標準的な外観を適用します。