input fileをCSSでキレイにしたい

結構この壁にぶつかってる人はいると思います。
textとかsubmitをキレイにしたのに、fileの参照ボタンが…！という思いをした人は多いでしょう。
というか僕がぶつかったので記事を書いているわけですが。

というわけで早速調べてみました。

一番参考になったのはこちらのサイト。

CSS2/DOM – Styling an input type=”file”

英語です。

なので、大事なとこだけ簡単に要約します。

＜CSS＞

１．<input type=”file” />を「position:relative」で配置した要素（divとか）の中に配置する。
２．「position:relative」で配置した要素（divとか）の中に子要素（divとか）を配置して、そこに<input />と<img />（実際表示されるもの）を入れる。
３．<input type=”file” />に「z-index:2」「opacity:0」をかける。
４．おしまい

＜JavaScript＞
ここでJavaScriptが出てくる理由は大きく分けて２つ。

１）CSSの２．で配置した<input />の中に何にも表示されないので、ファイルのパスファイル名を表示させたい。
２）設定したCSSがきいてくれない古いブラウザ対応

しかし古いブラウザっていっても、上記サイトで言及されていたのはNetScape3/4とIE4です。
これはもう無視していいレベルと勝手に判断。
※もしかしたら他のブラウザで問題があるかもなので、自分で調べてください！

なので、ファイルのパスファイル名を表示させる処理だけ加えれば完成ということになりそうですな。

一通り上記の内容をまとめるとこうなります。

＜HTML＞

＜CSS＞

div.fileinputs {
 position: relative;
 height:20px;
}

div.fakefile {
 position: absolute;
 top: 0px;
 left: 0px;
 z-index: 1;
}

input.file {
 position: relative;
 text-align: right;
 -moz-opacity:0 ;
 filter:alpha(opacity: 0);
 opacity: 0;
 z-index: 2;
}

＜JavaScript＞

※jQueryを使ってます。

あとはお好きにデザインしちゃってください！