トピックス

HOME
トピックス
WEBコーディング
ファイル添付用のinputタグをCSSでカスタマイズする方法

ALL WEBサイト全般WEBデザインWEBコーディングWEBマーケティングWEBサーバーニュース

カテゴリーを選択

2020.09.03

WEBコーディング

ファイル添付用のinputタグをCSSでカスタマイズする方法

フォーム関連のタグの見た目はブラウザ毎にデフォルトの見た目がありますが、WEBサイト毎にデザインに合わせて見た目を変更するとより統一感を持たせることができます。

今回はフォームのパーツの中でもファイル添付用のinputタグの見た目のカスタマイズ方法をご紹介します。

デフォルトの表示確認

デフォルトの見た目は下記のようになります。

これは本サイトを見るのに使っているブラウザの種類によって見た目が異なります。
もし、数種類のブラウザをインストールされているならば見た目の違いを確認してみてください。

サンプル

今回は下記のようなサンプルを用意しました。

ファイルを添付する選択されていません

HTML

HTMLのサンプルソースは下記になります。

<div id="attachment">
 <label><input type="file" name="ファイル添付" class="fileinput">ファイルを添付する</label>
 <span class="filename">選択されていません</span>
</div>

labelタグは、inputタグを直接クリックしなくても囲っている範囲をクリックすればinputタグが選択できるという特性があるのを利用します。

label部分だけでも構いませんが、今回はアップロードした添付ファイル名を一緒に表示させるための、「.filename」を用意しています。そのため「.filename」の記載は無くても問題ありません。

CSS

今回は下記のようなサンプルを用意しました。

#attachment label {
 /* ボタン部分の見た目（任意） */
 display: inline-block;
 position: relative;
 background: #666;
 color:#fff;
 font-size: 16px;
 padding: 10px 18px;
 border-radius: 4px;
 transition: all 0.3s;
}
#attachment label:hover {
 background: #888;
 transition: all 0.4s;
}
#attachment label input {
 /* 今回のポイント */
 position: absolute;
 left:0;
 top:0;
 opacity: 0;
 width: 100%;
 height: 100%;
}
#attachment .filename {
 font-weight: 16px;
 margin:0 0 0 10px;
}

一番重要なのは本来のinputタグをpositionで浮かせてopacityで透明にしておきます。そうすることでlabelタグをinputの代わりに装飾できるため見た目をカスタマイズすることができます。

また、今回のポイントはinputタグを「width: 100%;」、「height: 100%;」としてlabelと同じ大きさにして透明にしておくことです。そうすることによりドラッグ＆ドロップに対応しているブラウザでは、本来のinputタグと同様にドラッグ＆ドロップが有効になります。

ただし、横幅・縦幅を0pxなどの小さい値にしておくとドラッグ＆ドロップでの読み込みが利かなくなり、クリックしてファイルを選択する形式しか有効になりません。

jQuery

これがサンプルのjQueryです。

$('#attachment .fileinput').on('change', function () {
 var file = $(this).prop('files')[0];
 $(this).closest('#attachment').find('.filename').text(file.name);
});

inputにファイルが添付されるとファイル名を取得して、指定の箇所にファイル名を挿入するという記述になります。