グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

以前このようなエントリを書きましたが、
久しぶりにselect要素の装飾について検索してみたところ、
Firefoxのselect要素に付くしつこいデフォルトスタイルを、
CSSのみで消し去る方法が書かれていました。

How to remove hide the <select> arrow in Firefox using

通常のアピアランスのクリアに加え、下記の2行を追加することで
あの憎き矢印を回避できるようです、これは期待が高まります。
------------
select {
　-moz-appearance: none;
　text-indent: 0.01px;　←コレと
　text-overflow: '';　←コレ
}
------------

また、このままだとIE10で矢印が表示されてしまうので、
------------
select::-ms-expand {
　display: none;
}
------------
を加えることで対処できます。

この方法でselect要素を装飾してみたサンプルを、
いくつかの環境で表示させてみました。

IE8に関してはまぁアレなのでアレとして、
PC版のFirefoxでは確かに矢印は消えています、素晴らしい。
しかし、ワタクシ的に一番期待していたAndroid版Firefoxでは
残念ながら効果がありませんでした...。
モジラさん、お願いしますよ。

select要素へのスタイルってFirefoxでは完全には効かないんですよね。
どうやってもデフォルトの▼が表示されてしまいやがります。
これはPCのFirefoxだけでなく、Android版Firefoxでも同じ。
-moz-appearance: none;
などと指定してもダメです、消えません。

この頑固な汚れはどうしようもないのかしら？
と思ってGoogle先生に訊ねてみると、
いくつかのForm装飾系jQueryプラグインに混じって
こんな記事が見つかりました。

CSS3でセレクトボックスをカスタマイズ

選択ボタンに見せかけたダミーのdiv要素の上に、
透過させたモノホンのselect要素を置くというもの。
そして選択した文字列はjsを通してダミー側に反映されます。
この非常にシンプルな構造のおかげで、
スマホや他のブラウザでも問題なく表示されます。
アイデアの勝利ですね、これは。

というかどうにかしてください、Firefoxさん。