input type=”file”の見た目を全てのブラウザで統一する方法

フォーム回りのクロスブラウザ対応は
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で書き換える形で
自由にテキストを変更できるようにしました。

フォーム回りのスタイリングは
思うようにいかないことが多く何かと大変ですが
その分きれいなフォームが作れると
達成感もひとしおですね。

それではまたの機会に。