【Input type="file"】のデザインをCSSとjQueryを使用して変更する

CSS

jQuery

2019-06-17

完成品

See the Pen input file design01 by daichi (@da10410) on CodePen.

HTML 部分

html で重要になるのは下記の部分です。全体を見たい方は CodoPen の方を確認してください。

<!--  ①非表示  -->
<input type="file" class="input-file" id="file01" style="display:none;" />

<!--  ②inputタグに紐づくlabel  -->
<label for="file01" class="fileup-btn">
  ファイルを選択
</label>

<!--  ③選択したファイルパスを記述する  -->
<labe class="js-file01">
  選択されていません
</labe>

まず、
<input type="file">
本体を非表示にします。
ファイル選択のエクスプローラーを起動するためのラベルを作成します。ここにスタイルを当てていきます。
選択したファイルパスを表示するためのラベルです。ここに関しては必ず
<label>
にする必要はありません。

CSS 部分

css 部分は、好みの問題になるので説明は大方省きます。下記は『選択したファイルパスを表示するためのラベル』のスタイル部分になります。

.js-file01 {
  display: block;
  width: 55%;
  box-sizing: border-box;
  padding: 10px 0 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: gray;
}

この下記部分で、ファイルパスが長すぎて要素に入りきらなかった場合などに『 ... 』と表示してくれるようになります。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

こんな感じにしてくれます:point_down::open_mouth: 今回初めて知りました:hushed: ブラウザの対応状況はこんな感じ:point_down: https://caniuse.com/#search=text-overflow%3A%20ellipsis%3B

Javascript 部分

$(".input-file").on("change", function () {
  const target = $(this).attr("id")
  $(".js-" + target).text($(this).val())
})

上記が選択したファイルパスを表示するための記述になります。

class="input-file"

は

<input type="file">

の要素全てに付与し、ファイルパスを表示する要素には

class="js-(【対応するinputタグのid】)"

のとすれば、上記の関数 1 つで全てのファイルパス表示に対応できる作りになっています。