web-dev-qa-db-ja.com

<select>要素のドロップダウン矢印を非表示にする正しい「-moz-appearance」値は何ですか

CSSのみで<select>要素のドロップダウン矢印のスタイルを設定しようとしていますが、Chrome/Safariで完全に機能します。

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;

  background-image: url('./select-arrow1.png') ;
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 200px;
}

どのように美しくレンダリングされます ここに見られるように

そのロジックにより、Firefoxで動作させるために私がしなければならなかった唯一のことは、すべての-webkit-*を-moz-*として追加することでした。

-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;

99％で機能します。唯一の問題は、デフォルトのドロップダウン矢印が消えず、背景画像の上にとどまることです こちらをご覧ください

-moz-appearance: button;は<select>要素では機能しないようです。また、-moz-appearance: none;は、デフォルトのドロップダウン矢印を削除する効果がありません。

デフォルトのドロップダウン矢印を削除するための-moz-appearanceの正しい値は何ですか？

更新：

2014年12月11日：新しいハックの発明をやめます。 4年半後、-moz-appearance:noneはFirefox 35から動作を開始しました。moz-appearance:buttonはまだ壊れていますが、とにかく使用する必要はありません。 これは非常に基本的な動作例です。

2014年4月28日：言及された cssハック は数ヶ月働いたが、2014年4月の初めからこのバグはすべてのプラットフォームでFirefox 31.0.a1 Nightlyに戻ります。

cssfirefoxwebkitgecko
67
Tony

これはみんな！ 修正済み！

お待ちください： https://bugzilla.mozilla.org/show_bug.cgi?id=649849

または 回避策

不思議に思う人のために：

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

まず、バグには多くの敵意のあるスパムが含まれているため、このバグに割り当てられた人にとっては敵対的な職場を作り出します。

第二に、これを行う能力を持っている人（書き換えを含む）は、当面は別のプロジェクト（b2g）に割り当てられ、そのプロジェクトが完了するまで時間がありません。

第三に、その人が再び時間を過ごしたとしても、これが優先されるという保証はありません、これはウェブキットにこれがあるにもかかわらず、それがどのように機能するかについての仕様を破るからです仕様を知っている）

https://wiki.mozilla.org/B2G/Schedule_Roadmap ;）を参照してください

このページはもう存在せず、バグは修正されていませんが、 許容される回避策 はJoãoCunhaから来ました。皆さんは今のところ感謝することができます！

38
MatTheCat

更新：これはFirefox v35で修正されました。詳細については、 full Gist を参照してください。

==Firefoxで選択矢印を非表示にする方法==

方法を見つけただけです。トリックは、-prefix-appearance、text-indentおよびtext-overflow。これは純粋なCSSであり、追加のマークアップは不要です。

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

端的に言えば、少し右に押すと、オーバーフローが矢印を取り除きます。きれいですね。

this Gist の詳細は書きました。 Ubuntu、Mac、Windowsでテストされ、すべて最新のFirefoxバージョンでテストされています。

99
João Cunha

デフォルトのドロップダウン矢印を削除するには、次を使用します。

-moz-appearance: window;
4
RD.

Opacity：0を入れてみてください。選択要素は表示されませんが、クリックするとオプションが表示されます。

1
Josh Byvelds

Mac OS -moz-appearance: window;は、MDNドキュメントに記載されている矢印を削除します： https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance 。 Mac OS X 10.8.2上のFirefox 13でテスト済み。 https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21 も参照してください。

0
Joshua Davis

FF35での修正を待っている間に、以下の2つのオプションを試す価値があります。

select {
    -moz-appearance: scrollbartrack-vertical;
}

または

select {
    -moz-appearance: treeview;
}

これらは、選択要素のカスタムスタイルに設定した矢印の背景画像を非表示にします。したがって、ブラウザ矢印と独自のカスタム矢印の両方の恐ろしいコンボの代わりに、沼地の標準ブラウザ矢印が表示されます。

0
El Guapo