※ 本記事は広告を利用しています
フォーム関連のタグの見た目はブラウザ毎にデフォルトの見た目がありますが、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にファイルが添付されるとファイル名を取得して、指定の箇所にファイル名を挿入するという記述になります。
今回のポイント
- labelの特性を利用してinputを見えなくしててもファイルが添付できるようにする
- inputは不可視化するけどlabelと同じ大きさにすることでドラッグ＆ドロップを有効にする（※対応しているブラウザのみ）
- js・jQueryを利用してどのファイルを添付したのか、添付したファイル名を取得・表示する
まとめ
フォームのパーツのデザインまでこだわることができれば、よりデザインの統一感があるWEBサイトになります。またファイルのinputタグの見た目のカスタマイズは、ラジオボタン・チェックボックスと似ている部分があります。
使用頻度はあまり高くないファイル添付ですが、フォームの見た目もデザインを合わせたい際にはぜひご参考ください。
