input[type="file"] のデザインを簡単に変える方法

ファイルを選択する input[type="file"] は、大抵テキストボックスとボタンで構成されているが、それらを個別にデザイン変更したりすることができない。

そこで、このファイル要素を label 要素で囲み、その中で別にボタンを作ってやることで、簡単にデザインを変えられる。

<label for="file-up">
  <span class="btn">ファイルを選択</span>
  <input type="file" id="file-up">
</label>

ファイル要素自体は非表示にしておく。

#file-up {
  display:none;
}

あとは span.btn をテキトーにデザインしてやったりすれば良い。

ファイル要素を囲んでいる label 要素なら、for 属性は書かなくても動くと思う。

選択したファイルなどは、元のとおり input[type="file" の #file-up が保持するので、その他の制御には変更が要らない。

この例だと、アップしたファイル名を表示するテキストボックスがないのだが、File API を使えばファイル名は取得できるので (フルパスなどはセキュリティのため不可)、JavaScript を絡めてやれば良い。