[解決済み] Firefoxでselect要素から矢印を削除する方法

質問

をスタイル化しようとしています。 select 要素をCSS3を使って作成しました。WebKit (Chrome / Safari) では望む結果が得られますが、Firefox ではうまくいきません (IE にも迷惑をかけません)。私はCSS3の appearance プロパティを使用していますが、なぜかFirefoxからドロップダウンのアイコンを振り払うことができません。

以下はその例です。 http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

見てわかるように、私は何も派手なことをしようとしているわけではない。ただ、デフォルトのスタイルを削除して、独自のドロップダウン矢印を追加したいだけなのです。言ったように、WebKit では素晴らしいが、Firefox ではそうではない。どうやら -moz-appearance: none は、ドロップダウン項目を取り除かない。

何か思い当たることはありますか？いいえ、JavaScriptはオプションではありません

解決方法を教えてください。

さて、この質問が古いことは分かっていますが、2年経ってもモジラは何もしてくれません。

簡単な回避策を思いつきました。

これは基本的に、Firefox のセレクト ボックスからすべての書式を削除し、セレクト ボックスをカスタム スタイルで囲むものですが、Firefox にのみ適用できます。

これがセレクトメニューだとします。

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

そして、cssクラス'css-select'を仮定してみましょう。

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

Firefox では、選択メニューが表示され、次に醜い Firefox の選択矢印が表示され、次にあなたの素敵なカスタム外観の矢印が表示されることになります。理想的ではありません。

Firefoxでこれを実現するには、クラス 'css-select-moz' で span 要素を囲んで追加します。

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

次に、モジラの汚い矢印を隠すCSSを -moz-appearance:window で修正し、カスタム矢印をスパンのクラス 'css-select-moz' に放り込んで、でもモジラにだけ表示させるようにします、こんな感じです。

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

3時間前にこのバグに遭遇しただけなのに、かなりクールです（私はウェブデザインの初心者で、完全に独学です）。しかし、このコミュニティは間接的に私に多くの助けを与えてくれたので、そろそろ何かお返しをする時だと思いました。

firefox(mac)のバージョン18、そして22(アップデート後)でしかテストしていません。

すべてのフィードバックを歓迎します。