・「input type=file」の見た目はどうカスタマイズするの？
こんな疑問にお答えします。
フォームによっては「input type=file」を使う場合ありますよね。
デフォルトだと下記みたいな見た目になるかと↓
ただデザインによってはカスタマイズが必要なはず。
実は「input type=file」の見た目は変更可能です。
すぐにできるよ！
ということで、この記事では「input type=fileの見た目をカスタマイズ」について解説していきます！
「input type=file」の見た目をカスタマイズ
目次
【解説】「input type=file」の見た目をカスタマイズ【コピペOK】
そんな「input type=file」の見た目を変えたサンプルがこちら↓
See the Pen input file カスタマイズ➀ by jito-coder (@jito-coder) on CodePen.
背景色がオレンジ色のデザインになっていますよね。
<div class="file">
<label class="file__label">
ファイルを選択!!
<input type="file" name="file">
</label>
<p class="file__none">選択されていません</p>
</div>.file__label {
display: block;
font-size: 16px;
line-height: 1.5;
text-align: center;
width: min(100%, 350px);
padding: 1.5em 0.5em;
margin-inline: auto;
color: #fff;
background-color: #ffa620;
cursor: pointer;
transition: opacity 0.3s ease;
}
.file__label:hover {
opacity: 0.7;
}
input[type=file] {
display: none;
}
.file__none {
font-size: 14px;
line-height: 1.5;
text-align: center;
margin-top: 1em;
word-break: break-all;
}$(function() {
$('.file__label input[type=file]').on('change', function () {
var file = $(this).prop('files')[0];
$('.file__none').text(file.name);
});
});コードの中で重要な点がこちら↓
- 「input type=file」を非表示に
- labelタグで「input type=file」を囲む
- labelタグに対してデザインを装飾
- pタグで「選択されていません」の文章を作る
- ファイル名を表示するプログラムを実装
順に解説してきます。
そのままinputタグに対して装飾は厳しいので、まず非表示にします。
「input type=file」に対して、display: noneを指定。
<input type="file" name="file">input[type=file] {
display: none;
}続いて「input type=file」を、labelタグで囲みましょう。
「ファイルを選択」等の文章も入れつつ作成します。
下記の感じですね。
<label class="file__label">
ファイルを選択!!
<input type="file" name="file">
</label>これで「ファイルを選択!!」という文字をクリックしたら、ファイル選択できるようになります。
そしたらlabelタグに対してCSSをあてて、指定されたデザインのように装飾していきましょう。
今回は例として下記のように実装しました。
.file__label {
display: block;
font-size: 16px;
line-height: 1.5;
text-align: center;
width: min(100%, 350px);
padding: 1.5em 0.5em;
margin-inline: auto;
color: #fff;
background-color: #ffa620;
cursor: pointer;
transition: opacity 0.3s ease;
}
.file__label:hover {
opacity: 0.7;
}cursor: pointerや、ホバーした時の透過率を指定することでクリックできますよ感を出しておきます。
これで「input type=file」自体のデザインはカスタマイズできました。
ただこのままでは、ファイル選択状態がわからないです。
選択状態が分かる文章をpタグで作成していきます。
今回は例として「選択されていません」というテキストを入れました。
<div class="file">
<label class="file__label">
ファイルを選択!!
<input type="file" name="file">
</label>
<p class="file__none">選択されていません</p>
</div>実装しやすいようにdivタグでlabelタグとpタグを囲ったよ
あとはファイルを選択したときに、➃で作成したpタグ文章内にファイル名が表示できれば実装完了です。
やり方は簡単でJavaScriptでプログラムを作ればOK。
今回は例としてjQueryで作成してみました。
コードが下記になります↓
$(function() {
$('.file__label input[type=file]').on('change', function () {
var file = $(this).prop('files')[0];
$('.file__none').text(file.name);
});
});簡単に説明すると
「input type=fileの値が変わったら、pタグの文章にそのファイルの名前を表示する」
という感じですね。
下記のようにファイル名が表示されるように。
これで「input type=file」のカスタマイズが完了しました！
今回display: noneを使ってinputを非表示に。そしてlabelタグを用いてカスタマイズしました。
ただこの方法ではフォーカスが当たらないんですよね。。
Enterキー等でclickイベントを発動させたい場合は、buttonタグ等を使う実装をする必要があるので注意。
【解説】「input type=file」の見た目をカスタマイズ【複数選択】
次に複数選択が可能な、「input type=file」のカスタマイズを紹介していきます。
サンプルがこちら↓
See the Pen input file カスタマイズ 複数選択 by jito-coder (@jito-coder) on CodePen.
複数のファイル選択ができますよね。
<div class="file-multiple">
<label class="file-multiple__label">
ファイルを選択!!
<input type="file" name="file" multiple>
</label>
<p class="file-multiple__none">選択されていません</p>
</div>$(function () {
$('.file-multiple__label input[type=file]').on('change', function () {
var files = $(this).prop('files');
var fileNames = Array.from(files).map(file => file.name);
$('.file-multiple__none').html(fileNames.join('<br>'));
});
});作りとしてはほぼ同じです。
違う点がこちら↓
- inputタグに「multiple」を記述
- ファイル名の配列を作って表示するプログラムを実装
順に解説してきます。
inputタグに「multiple」を入れることで、複数のファイル選択が可能になります。
<input type="file" name="file" multiple>複数選択したファイル名の配列を作り、それぞれ表示するようなプログラムを実装します。
下記が例となるコードですね。
$(function () {
$('.file-multiple__label input[type=file]').on('change', function () {
var files = $(this).prop('files');
var fileNames = Array.from(files).map(file => file.name);
$('.file-multiple__none').html(fileNames.join('<br>'));
});
});５行目の「br」をhtmlでいれることで、複数のファイル名を改行させて表示することができます。
下記の感じですね↓
参考にどうぞ。
【解説】「input type=file」の見た目をカスタマイズ【コピペOK】：まとめ
- 「input type=file」を非表示に
- labelタグを使って装飾
- ファイル選択状況と、ファイル名を表示させるようにする
- フォーカスを当てたいならbuttonタグ等で作成する
- 複数選択可能な実装もできる
「input type=file」の見た目をカスタマイズしたい時はためしてみてね！
