input type=”file”の見た目を全てのブラウザで統一する方法
javascript, jQuery 2019年10月6日
フォーム回りのクロスブラウザ対応は WEBコーダーにとって厄介な仕事の一つですが 中でも画像の添付ボタンを追加する input type=”file”は ブラウザによって見た目が違うわ ボタン横のテキストは変更できないわと 何かと厄介な存在です。
今回はそんなinput type=”file”の見た目を 記事投降時点最新のChrome、Firefox、EDGE、safariの 全主要ブラウザで統一し、さらに デフォルトでは変更できない ボタン横のテキスト(Chromeでは「選択されていません」)をも 変更できるようにする方法をご紹介します。
コード
HTMLコード
<div class="wrapper"> <div class="formFile"> <span class="info">ファイル添付1→</span > <label for="file01" > <span class="browse_btn">添付ファイルを選択</span><input type="file" name="file01" id="file01" /> </label> <span class="formFileName">選択されていません</span> </div > <div class="formFile"> <span class="info">ファイル添付2→</span > <label for="file02" > <span class="browse_btn">添付ファイルを選択</span><input type="file" name="file02" id="file02" /> </label> <span class="formFileName">選択されていません</span> </div > <div class="formFile"> <span class="info">ファイル添付3→</span > <label for="file03" > <span class="browse_btn">添付ファイルを選択</span><input type="file" name="file03" id="file03" /> </label> <span class="formFileName">選択されていません</span> </div > </div>
CSSコード
.formFile{ margin-bottom: 30px; } .formFile input[type="file"]{ display: none; } .info{ display: inline-block; margin-right: 20px; } .formFile label{ border: 1px solid #bbb; border-radius: 3px; padding: 2px 5px; font-size: 12px; letter-spacing: 0; cursor: pointer; } .formFileName{ display: inline-block; font-size: 12px; margin-left: 10px; }
javascriptコード
$(function(){ $(document).on('change','input[type="file"]',function(){ var file = this.files[0]; console.log(file); $(this).parents('label').nextAll('.formFileName').text(file.name); }); });
ポイントはinputタグを display:none;で見えなくして その代わりにクリックすると 指定したinputタグに作用する labelタグを設置している点です。
また添付した画像ファイルの 名前を表示していたボタン横のテキストについても 代わりのspanタグ(.formFileName)を用意して、 ファイルの添付があった際に そちらのテキストをjavascriptで書き換える形で 自由にテキストを変更できるようにしました。
フォーム回りのスタイリングは 思うようにいかないことが多く何かと大変ですが その分きれいなフォームが作れると 達成感もひとしおですね。
それではまたの機会に。