2023.02.24

【完全版】input type=”file” のデザインをjQueryなしで自由に変更してみよう。｜css｜javascript

主にフォームなどで使用されるinputのタイプ属性「file」

とても便利でデフォルトでも十分使いやすい機能なのですが、デザインが素朴なために見た目を調整する必要がかなりの頻度であります。

ちなみにデフォルトでは以下のようなデザインをしています。

このボタンのデザインを変更するために直接CSSを適応しようとしても、このボタンは融通が利かないのでCSSをあまり受付けてくれず思い通りのデザインにすることはまずできません。

ではどうやったらよいかと言いますと

少し面倒ですがボタンの代わりになるhtmlを記述してボタンと連動してそちらを変化させるしかありません。

まぁとりあえず早速やっていきましょう。

実装には以下javascriptを記述し、あとは好きにcssを適応していきましょう。

document.addEventListener('DOMContentLoaded',function(){
  
  var inputFiles = document.querySelectorAll('input[type="file"]');

  if(inputFiles.length){

    var defaultText = '選択されていません';

    inputFiles.forEach(function(inputFile){
      
      //html追加
      if(!inputFile.closest('label')){
        inputFile.outerHTML = '<label class="mcc-input-file">'+inputFile.outerHTML+'<span class="input-file-text-wrap"><span class="file-text">ファイルを選択</span><span class="file-select">'+defaultText+'</span></span></label>';
      }

    });

    //変更時の動作
    var inputFiles = document.querySelectorAll('input[type="file"]');
    inputFiles.forEach(function(inputFile){
      
      inputFile.addEventListener('change',function(){

        var $this = this,
        fileSelect = $this.closest('.mcc-input-file').querySelectorAll('.file-select')[0];

        if($this.files.length){
          fileSelect.textContent = $this.files[0]['name'];
        }else{
          fileSelect.textContent = defaultText;
        }
      });
    });

  }
});

document.addEventListener('DOMContentLoaded',function(){

var inputFiles = document.querySelectorAll('input[type="file"]');

if(inputFiles.length){

var defaultText = '選択されていません';

inputFiles.forEach(function(inputFile){

//html追加

if(!inputFile.closest('label')){

inputFile.outerHTML = '<label class="mcc-input-file">'+inputFile.outerHTML+'ファイルを選択'+defaultText+'</label>';

}

});

//変更時の動作

var inputFiles = document.querySelectorAll('input[type="file"]');

inputFiles.forEach(function(inputFile){

inputFile.addEventListener('change',function(){

var $this = this,

fileSelect = $this.closest('.mcc-input-file').querySelectorAll('.file-select')[0];

if($this.files.length){

fileSelect.textContent = $this.files[0]['name'];

}else{

fileSelect.textContent = defaultText;

}

});

}

});

これだけでinput要素にlabelが付けられ、その中にhtml要素のボタン要素と投稿されたファイルを表示する箇所が追加されます。

例としては上記画像のような感じです。
※左側はデフォルトのinputになります。

クラス属性「file-text」ではボタンデザインを、

「file-select」では選択中のファイルの名前をそれぞれ変更できます。

※label要素で囲まれている場合は無視するようになっていますのでお気をつけください。

ちなみにwordpressのプラグイン「Contact Form 7」にも対応していますが、「MW WP Form」の場合は少し追記が必要です。

MW WP Formの場合

MW WP Formの場合は何かファイルを選択している場合に、選択状態を解除するための「✕」ボタンが表示されます。

そのため、「✕」ボタンをクリックした場合にもテキストが変更されるよう下記コードへ修正します。

document.addEventListener('DOMContentLoaded',function(){
  
  var inputFiles = document.querySelectorAll('input[type="file"]');

  if(inputFiles.length){

    var defaultText = '選択されていません';

    inputFiles.forEach(function(inputFile){
      
      //html追加
      if(!inputFile.closest('label')){
        inputFile.outerHTML = '<label class="mcc-input-file">'+inputFile.outerHTML+'<span class="input-file-text-wrap"><span class="file-text">ファイルを選択</span><span class="file-select">'+defaultText+'</span></span></label>';
      }

    });

    //変更時の動作
    var inputFiles = document.querySelectorAll('input[type="file"]');
    inputFiles.forEach(function(inputFile){
      
      inputFile.addEventListener('change',function(){

        var $this = this,
        fileSelect = $this.closest('.mcc-input-file').querySelectorAll('.file-select')[0];

        if($this.files.length){
          fileSelect.textContent = $this.files[0]['name'];
        }else{
          fileSelect.textContent = defaultText;
        }
      });
    });

    //MWWPformのclose動作
    var mwformFileDeletes = document.querySelectorAll('.mwform-file-delete');
    mwformFileDeletes.forEach(function(mwformFileDelete){
      mwformFileDelete.addEventListener('click',function(){
        var myform = mwformFileDelete.closest('form'),
            myInputName = mwformFileDelete.getAttribute('data-mwform-file-delete'),
            myInput = myform.querySelectorAll('input[name="'+myInputName+'"]')[0],
            myFileSelect = myInput.closest('.mcc-input-file').querySelectorAll('.file-select')[0];

        myFileSelect.textContent = defaultText;
            
      });
    });
  }
});

document.addEventListener('DOMContentLoaded',function(){

var inputFiles = document.querySelectorAll('input[type="file"]');

if(inputFiles.length){

var defaultText = '選択されていません';

inputFiles.forEach(function(inputFile){

//html追加

if(!inputFile.closest('label')){

}

});

//変更時の動作

var inputFiles = document.querySelectorAll('input[type="file"]');

inputFiles.forEach(function(inputFile){

inputFile.addEventListener('change',function(){

var $this = this,

fileSelect = $this.closest('.mcc-input-file').querySelectorAll('.file-select')[0];

if($this.files.length){

fileSelect.textContent = $this.files[0]['name'];

}else{

fileSelect.textContent = defaultText;

}

});

//MWWPformのclose動作

var mwformFileDeletes = document.querySelectorAll('.mwform-file-delete');

mwformFileDeletes.forEach(function(mwformFileDelete){

mwformFileDelete.addEventListener('click',function(){

var myform = mwformFileDelete.closest('form'),

myInputName = mwformFileDelete.getAttribute('data-mwform-file-delete'),

myInput = myform.querySelectorAll('input[name="'+myInputName+'"]')[0],

myFileSelect = myInput.closest('.mcc-input-file').querySelectorAll('.file-select')[0];

myFileSelect.textContent = defaultText;

});

}

});

ちなみにMW WP formが入ってなくても上記コードで動くので、使うか使わないかわからない場合は上記コードで良いかと思います。

最後に

今回はコピペだけで実装できるコードをご紹介させていただきました。

少しでも皆様のお役に立てれば幸いです。

また、今回jQueryを使用せずに純粋なjavascriptで実装しましたが「MW WP form」への対応や、label要素を付与する処理などはjQueryを使った方が簡単です。

そのため、上記を参考に自分で組んでみたい場合はjQueryの使用をおすすめします。

ただ、ボタンのクリック時のテキスト切り替え時の動作部分はjQueryだと実装する時色々と大変ですので純粋なjavascriptの方が簡単に実装できます。（特にキャンセルを押した時の動作とかおかしくなりがちなので気をつけてください）

JavaScript