CSSのappearanceがFirefoxで効かない場合の解決策

# 2014.8.25 重要な追記
このハックは、今年4月あたり(FirefoxNightly 31?)から効かなくなってます。。
元記事 https://gist.github.com/joaocunha/6273016 でも、どうするよ的な議論＆試行錯誤が交わされていますが、:-moz-any(hoge):before プロパティを使った方法で消せるのを見つけた人がいるようです(FF3.6～限定)。
http://jsbin.com/pozomu/4/edit

なんだか素直にJS使った方がいい気がしてきますね。

----

今までは、フォーム内の特定の部品(radioボタン、select要素など)のデザインを好きなように変更しようと思ったら、
JavaScript(有名所ではuniform.jsとか…)を使って色々と手を加えてやらなければいけませんでした。

でも最近、Chrome等のモダンブラウザでは、
"-webkit-appearance: none;"等と書く事で
ブラウザデフォルトのSelect要素のデザインをリセットできるので、
自由にデザインが変更できるようになってきました。

便利な時代になりましたね。

※appearanceは、正確にはブラウザが独自に描画するデフォルトUIをCSSで変更できるプロパティです。
→　https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

ただ、このプロパティはまだ実験段階。
特定の要素にしか効かなかったり、細かいバグが有ったりと、いろいろ発展途上です。

特に最近気になっていたのがSelect要素でのバグ。
appearanceを"none"に設定してやれば、あとは自由に装飾し放題！と思いきや、
Firefoxだけ、デフォルトのSelect要素の右側に表示される下矢印みたいなのが
残ったままになってしまいます。
今日はそれを解消する方法を見つけたので共有します。

https://gist.github.com/joaocunha/6273016

↑ここ見れば一発なんですが、

select {
	text-indent: .01px;
	text-overflow: "";
}

をつけると、Firefoxで出ていた矢印がうまい具合にコレが消えてくれるとのこと。
Mozillaのサイトにもあるように、領域をはみ出した要素をどうするか、というのを指定する"text-overflow"は、カスタムで空文字を指定することが出来ます(現時点ではGeckoだけがサポート)。
Firefoxでは、Select要素の下矢印の扱いはインラインテキストの1文字と同等のようで、
text-indentで見た目には変化のない0.01pxを指定すると「下矢印が領域をはみ出した」と判断して、text-overflowの指定ルールに従って省略してくれるという仕組みのようです。
なんだかかなり不安定なハックな気もしますが。。。

実際に自分でもやってみました(Firefoxで見た時だけ分かるサンプルです)。

Firefox開くのめんどいという方は以下のキャプチャ画像をどうぞ。

こんなかんじで、text-indent, text-overflowを付けた右側のSelect要素の下矢印が
ちゃんと消えてくれているのが分かります。

ただ、こういうハックは後で何が起こるか分からないので、
UAでFirefoxを判定し、htmlタグに"firefox"というクラスを付けてから、
.firefox .uiSelect select {
text-indent: .01px;
text-overflow: "";
}

とやったほうが良いですね。
あと、～IE10ではappearanceプロパティ自体に対応していないので、
このテクニックはスマホ案件で使うこと前提ということで。。。