【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>
- まず、本体を非表示にします。
<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】)"