Noob Front End Engineer Blog

CONTACT

【Input type="file"】のデザインを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>
  1. まず、<input type="file">本体を非表示にします。
  2. ファイル選択のエクスプローラーを起動するためのラベルを作成します。ここにスタイルを当てていきます。
  3. 選択したファイルパスを表示するためのラベルです。ここに関しては必ず<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;

こんな感じにしてくれます:pointdown::openmouth: image.png 今回初めて知りました: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 つで全てのファイルパス表示に対応できる作りになっています。


Written by daichi iwamoto