input type="file"をデザインする

<input type="file">をデザインする方法の1つをご紹介。

1. <input type="file"> をcssで透明にし、それ独自の見た目を非表示にします。
2. <input type="file"> を　pタグで囲い、任意のデザインをcssで指定します。
3. jqueryで、<input type="file">のファイルが選択されたら、そのファイル名を表示させるようにしてやります。

html

<p class="input-file-btn">
  ファイルを選択
  <input type="file" class="input-file">
</p>
<span>選択されていません</span>

css

.input-file-btn {
  position: relative;
  // 任意のスタイル
}
.input-file {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

jquery

$(function() {
   $('.input-file').on('change', function() {
     var file_name = $(this).prop('files')[0].name;
     $(this).parent().next().html(file_name);
   });
});