QUOIT Blog

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

この記事は7年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。

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

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

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

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

英語です。

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

<CSS>

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

<JavaScript>
ここでJavaScriptが出てくる理由は大きく分けて2つ。

1)CSSの2.で配置した<input />の中に何にも表示されないので、ファイルのパスファイル名を表示させたい。
2)設定した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を使ってます。

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

2 comments for “input fileをCSSでキレイにしたい

  1. 2011年1月13日 at 12:30 PM

    お世話になります。

    一点だけ、

    <input type=”file” name=”img”/>

    <input type=”file” name=”img” class=”file”/>

    かと思います。

    同じ問題にぶつかっていたので
    こちらの記事が非常に参考になりました。
    ありがとうございます。

  2. yakumo
    2011年1月13日 at 12:42 PM

    ショコさん>
    ご指摘ありがとうございます!ずっと気付かなかった…w
    修正致しました!