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

5227 ワード
HTML CSS jQuery HTML テキストリンク

<input type="file">は直接デザインの変更ができないので、簡単にですがlabelタグとjQueryを用いてカスタマイズしていきます。

デフォルト

<input type="file">をカスタマイズ

sample.html

<label for="form-image">ファイルを選択</label>
<input type="file" id="form-image">
<span class="select-image">選択されていません</span>

inputタグの上にlabelタグを記述します。labelタグでinputタグを囲ってしまっても構いません。

labelタグのforとinputタグのidに同じ値を指定してタグの紐づけをします。
こうすることでlabelタグ内の要素をクリックしたときにファイルの選択ができるようになります。

※ちなみにidは2つ以上指定できないので注意してください。

sample.css

label {
  padding: 5px 20px;
  color: #ffffff;
  background-color: #295d72;
  cursor: pointer;
  border-radius:10px;
  transition: .3s;
}
label:hover {
  opacity: 0.8;
}
input[type="file"] {
  display: none;
}

inputタグをdisplay: none;で非表示にしましょう。

先ほどforとidを紐づけているのでcssを当てたlabelタグをクリックしてもファイルを選択できます。

この時点ではファイルを選択してもspanタグ内にファイル名が表示されず、「選択されていません」のテキストのままなのでjQueryでテキストをファイル名に変換します。

※jQueryは適宜の環境でインストールしてください。

input_file.js

//fileを変更したら
$('input').on('change', function () {
    //propを使って、file[0]にアクセスする
    var file = $(this).prop('files')[0];
    //text()で要素内のテキストを変更する
    $('.select-image').text(file.name);
});

inputタグにfileがセットされたときにselect-imageというクラスがあるタグのテキストをfile.nameに変更します。

$('span').text(file.name);でもいいんですが、他のinputタグの中にあるspanタグに意図しない変化がありうるのでクラスを指定しました。

See the Pen mdWxaxq by あきみね (@akimine27th) on CodePen.