input fileをCSSでキレイにしたい
結構この壁にぶつかってる人はいると思います。
textとかsubmitをキレイにしたのに、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を使ってます。
あとはお好きにデザインしちゃってください!
“input fileをCSSでキレイにしたい” に対して2件のコメントがあります。
コメントは受け付けていません。
お世話になります。
一点だけ、
<input type=”file” name=”img”/>
↓
<input type=”file” name=”img” class=”file”/>
かと思います。
同じ問題にぶつかっていたので
こちらの記事が非常に参考になりました。
ありがとうございます。
ショコさん>
ご指摘ありがとうございます!ずっと気付かなかった…w
修正致しました!