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で書き換える形で 自由にテキストを変更できるようにしました。

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

それではまたの機会に。