web-dev-qa-db-ja.com

Bootstrap 3スタイル付き選択ドロップダウンは、OS X上のFirefoxで見苦しい

Bootstrap 3のフォーム<select>要素をスタイリングすると、OS X上のFirefoxで見苦しいボタンがレンダリングされます。

Ugly select in Firefox on OS X

（ http://bootply.com/98385 ）

これは明らかに既知の問題であり、多くのハックと回避策がありますが、どれも非常にきれいではありません（ https://github.com/twbs/bootstrap/issues/765 ）。 Bootstrapドロップダウンまたは追加のプラグインを使用する以外に、この問題に対する適切な解決策を誰かが見つけたかどうかは疑問です。 Bootstrapドロップダウンではなく、HTML <select>を使用することを意図的に選択しました。モバイルデバイス上の長いリストの方が使い勝手が良いからです。

これはFirefoxの問題ですか、それともBootstrapの問題ですか？

詳細：Mac OS X 10.9、Firefox 25.0.1

Update 12/4/13：各ブラウザがFirefox、Chromeを使用してOS X 10.9で<select>をレンダリングする方法を並べて比較しました。およびSafari、@ zessxへの応答（ http://bootply.com/98425 を使用）。明らかに、ブラウザとOSで<select>フォーム要素がレンダリングされる方法には大きな違いがあります。

Each browser renders the select element quite differently

<select>タグは、使用しているOSによって異なる方法で処理されることを理解しています。これは、スタイリングと動作を指示するネイティブOSベースのコントロールがあるためです。しかし、Bootstrapのclass="form-control"について、Firefoxで<select>フォーム要素が異なって見える原因は何ですか？ Firefoxのデフォルトのスタイルが設定されていない<select>が問題なく見えるのに、スタイルが設定されると見た目が悪くなるのはなぜですか？

csstwitter-bootstraptwitter-bootstrap-3
69
bhall

IEのドロップダウン矢印の周りの灰色のボックスを実際に変更できます。

        select::-ms-expand {
            width:12px;
            border:none;
            background:#fff;
        }

enter image description here

27
jzm

実際には、ドロップダウンフィールドでほとんどすべてを行うことができ、すべてのブラウザで同じに見えます。コード例を見てください

select.custom {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
  padding-right: 25px;
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.custom::-ms-expand {
  display: none;
}

https://jsfiddle.net/x76j455z/10/

23
rafx

rafxおよびSinaによる優れた回答に基づいて、ここにスニペットを示しますこれはFirefoxのみを対象とし、デフォルトのボタンをBootstrapのアイコンテーマからコピーされた下向きキャレットに置き換えます。

前：

default select

後：

styled select

@-moz-document url-prefix() {
  select.form-control {
    padding-right: 25px;
    background-image: url("data:image/svg+xml,\
      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
           height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    -moz-appearance: none;
    appearance: none;
  }
}

（インラインSVGには読みやすいようにバックスラッシュと改行があります。アセットパイプラインで問題が発生する場合は削除してください。）

これが JSFiddle です

19
Tobia

SelectBoxIt（ http://gregfranko.com/jquery.selectBoxIt.js/ ）と呼ばれるBootstrapでニースを再生しているように見える滑らかなjQueryプラグインがあります。私が気に入っているのは、一貫したスタイリングを維持しながら、どのOSでもネイティブ選択ボックスをトリガーできることです（ http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox ）。ああ、どうやってBootstrapがこのオプションを提供したか！

これの唯一の欠点は、ソリューションに複雑さの別のレイヤーを追加し、他のすべてのプラグインが時間の経過とともにアップグレード/パッチされるときに互換性を確保するための追加作業を追加することです。 Bootstrap 3の互換性についてもわかりません。しかし、これはブラウザーとOSの一貫した外観を確保するための優れたソリューションかもしれません。

8
bhall

-webkit-appearance:noneがChromeとSafariのトリックを行うと確信しています。

編集：-moz-appearance: noneはFirefoxでも同様に動作するはずです。

7
Tim Nguyen

これは通常の動作であり、Firefoxのデフォルトの<select>スタイルが原因です。line-heightを設定することはできません。カスタマイズした<select>が必要な場合は、paddingで再生する必要があります。

例、Firefox 25の下での結果/ Chrome 31/IE 10：

<select>
  <option>Default</option>
  <option>Default</option>
  <option>Default</option>
</select>

<select class="form-control">
  <option>Bootstrap</option>
  <option>Bootstrap</option>
  <option>Bootstrap</option>
</select>

<select class="form-control custom">
  <option>Custom</option>
  <option>Custom</option>
  <option>Custom</option>
</select>

select.custom {
  padding: 0px;
}

ブートプライ

enter image description here

7
zessx

これは簡単。これを.form-controlの中に入れるだけです：

.form-control{
        -webkit-appearance:none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
}

これにより、ブラウザの外観が削除され、CSSが許可されます。

2
Ivijan Stefan Stipić

プラグインを使用しています bootstrap-select for Bootstrap for dtyling select。本当にうまく機能し、興味深い追加機能がたくさんあります。確かにお勧めできます。

1
aahoogendoorn

この特定の問題を解決する2つの潜在的な方法を見つけました。

  1. 選択済み を使用します

  2. 以下のように@-moz-document url-prefix()を使用してMozillaブラウザをターゲットにします。

@-moz-document url-prefix() {
  select {
    padding: 5px;
  }
}
1
Sina

Chosenを使用しています。見てください： http://harvesthq.github.io/chosen/

Firefox、Chrome、IE、および同じスタイルのSafariで動作します。しかし、モバイルデバイスではそうではありません。

0
skip2me99

Bootstrap 4 +を使用すると、選択入力にクラスcustom-selectを追加するだけで、ブラウザ固有のスタイルを削除し、矢印アイコンを保持できます。

ここにドキュメント： Bootstrap 4カスタムフォーム選択メニュー

0
Braden Heckman