6

Twitter Bootstrapを使用しています。

これが私のコードのフィドルです。そして、これが開かれたGithub Issueです

Bootstrap docs に従って、ボタンが追加された検索入力を実装しました。私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 番目のスクリーンショットに示すように、検索ボックスが正しく表示されます (薄い境界線とサイズの違いは無視してください)。

デスクトップでのブートストラップ検索入力

---------質問---------

最初のスクリーンショットのように、検索入力が正しく表示されないようにするにはどうすればよいですか? そして、これを引き起こしている可能性があるのは何ですか？両方の検索入力のソース スタイルと計算されたスタイルを確認しましたが、すべて同じように見えます。ヘルプ？

を変更しinput type="search"てtype="text"も問題は存在しないため、CSS のどこかにあるはずですが、わかりません。この効果を実際に適用する CSS はどれですか?

---------更新---------

検索入力に切り替える<div class="input-append">と、正しく表示されます。<div class="input-prepend">また、フィールドにフォーカスがあると、右側の丸みを帯びた角が「四角」になり、正しく表示されます。

4

1 に答える 1

1

できないようです。このリンクを参照してください

webkit html5 検索入力

見積もり：

WebKit には、検索入力で変更できる内容に大きな制限があります。アイデアは一貫性だと思います。特に Safari では、検索フィールドはブラウザの右上にある検索ボックスのように見えます。次の CSS は、WebKit では「何があっても」無視されます。つまり、!important ルールで対抗することさえできません。

つまり、Safari はスタイルを無視し、標準の外観を適用します。

于 2013-03-28T21:20:17.710 に答える