input type="file" なやつを独自にデザインする方法

デモ

HTML

<div class="file">
  ファイルを選択
  <input type="file"/>
</div>

CSS

.file {
  display: inline-block;
  overflow: hidden;
  position: relative;
  padding: .5em;
  border: 1px solid #999;
  background-color: #eee;
}

.file input[type="file"] {
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  font-size: 100px;
  cursor: pointer;
}

対応ブラウザ

以下のブラウザで確認済み。 IE 6 もたぶん動くんじゃないだろうか。

• Internet Explorer 7, 8, 9
• Firefox 20
• Chrome 26
• Safari 5, 6

簡単な解説

type 属性が file な input 要素は厄介なもので、 button 要素などと違い CSS でスタイルを調整できない。しかしデフォルトの表現を変えたいという機会はままあるようで、このような置換テクニックが必要になってくる。ここで紹介するものは JavaScript は不要なもの。

基本的な考え方は、「input 要素を透明にして、上にかぶせる」というもの。これで、見た目は好きに調整できるし、クリックした時はデフォルトの動作が呼び出されるようになる。

ミソなのは以下の部分。

  right: 0;
  font-size: 100px;

これは IE 対策。IEでは <input type="file"/> の向かって左側をシングルクリックしただけでは、ファイル選択ダイアログは立ち上がらない。そのため、向かって右側をむりやりクリックさせるための努力が上記の CSS 指定。

取るに足らないテクニックだけれども、ネットで得た情報だと　JavaScript まで使って超めんどい感じに実装してたりしたので、メモった。

もっと良いまとめがあった

http://devadjust.exblog.jp/16866976

上記記事だと、 JavaScript を使ってキーボード操作まで出来るようにしていた。なるほど。