最終更新日: 2021年1月10日

    input type="file"のボタンデザインを変更する方法を解説！

    input type="file"タグのCSSデザインはそのままでは変更することができませんが、labelタグを活用することでinput type="file"のボタンデザインを変更することができます。その方法についてサンプルコード付きで解説しています。

    コンテンツ [表示]

    1. 1input type="file"のボタンデザインを変更したい
    2. 2input type="file"のボタンデザインを変更する方法
    3. 3アップロードしたファイル名を含めてinput type="file"のデザインを変更する方法
    4. 4まとめ

    input type="file"のボタンデザインを変更したい

    input type="file"タグのファイル選択ボタンは、ブラウザによってデフォルトの見た目は少し変わりますが、どれもシンプルすぎる見た目です。

    また、input type="file"タグのCSSスタイルを変更することはできません。

    そのため、labelタグを使うことでinput type="file"タグのボタンのCSSスタイルをオシャレに変更することができます。

    Photo byPexels

    input type="file"のボタンデザインを変更する方法

    サンプルコードを使って、input type="file"タグのファイル選択ボタンのCSSデザインを変更する方法を解説していきます。

    index.html

    <form action="index.html" method="POST" entype="multpart/form-data">
  <label for="file" class="filelabel">ファイルを添付</label>
  <input type="file" name="fileinput" id="file" class="fileinput">
</form>

    input type="file"タグにid属性のfileを指定しています。また、labelタグにfor属性でfileを指定すると、id属性にfileを指定したinput type="file"タグと関連付けが行えます。

    関連付けることでlabelタグをクリックすると、input type="file"がクリックされた時と同様の動作を行います。

    また、CSSでデザインしやすいようにinput type="file"タグにはfileinputクラス、labelタグにはfilelabelクラスを指定しています。

    index.css

    .filelabel{
  display: inline-block;
  position: relative;
  background-color: #1877F2;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.5s;
}
.filelabel:hover{
  background-color: #004db1;
}

.fileinput{
  display: none;
}

    CSSでfilelabelクラスの要素をボタンっぽい見た目に仕上げています。また、ここでfileinputクラスの要素はdisplay: none;としてブラウザでは表示しないようにしています。

    非表示の状態ではinput type="file"タグの要素をクリックすることはできませんが、id属性とfor属性により関連付けが行われているためfilelabelクラスの要素をクリックすることで同様の動作を行うことは先ほども説明しましたね。

    これでinput type="file"タグのファイル選択ボタンのデザインを変更することができました。

    アップロードしたファイル名を含めてinput type="file"のデザインを変更する方法

    次に、アップロードしたファイル名を含めてinput type="file"タグのファイル選択ボタンのデザインを変更する方法をサンプルコードとともに紹介したいと思います。

    アップロードしたファイル名を含めるためには、jQuery(JavaScript)を使って実装していきます。

    index.js

    $('.fileinput').on('change', function(){
  let file = $(this).prop('files')[0];
  $('.filelabel').text(file.name);
});

    HTML,CSSは先ほどと同様のものを使用します。

    jQueryでfileinputタグの要素にchangeイベントを設定します。changeイベントが発火したとき、つまりファイルがアップロードされたときには、その要素のfiles属性をpropメソッドで取得します。

    files属性には選択されたファイルが列挙されます。ですが、今回は１つのファイルしかアップロードしないため、インデックス番号0を指定して要素を取得します。

    取得した要素fileに対して、file.nameとすることでアップロードしたファイルの名前を参照することができます。
    file.nameでファイル名が取得できたので、filelabelクラスの要素内のテキストをtextメソッドでファイル名に書き換えます。

    以上で、アップロードしたファイル名をボタンに表示することができました。

    まとめ

    input type="file"のボタンデザインを変更する方法を紹介してきました。自分好みのデザインのボタンを作れるようになっていることでしょう。

    GeekHive採用サイト

    関連記事