form input type="file"のCSSを変える方法

目的

form、type="file"の デフォルトのCSSを変更する

手順

• 新しいlabelを用意する
• デフォルトのボタンをdiplay:noneで削除
• 新しいlabelのCSSを変更する

新しいlabelを用意する

<label for="file-upload" class="custom-file-upload">
      Custom Upload
</label>
<input type="file" name="image" id="file-upload">

デフォルトのボタンをdiplay:noneで削除

デフォルトのボタンを削除するCSS

  input[type="file"] {
    display: none;
}

新しいlabelのCSSを変更する

新しいlabelに効かせるCSS

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: rgb(241, 241, 241);
    cursor: pointer;
}

このCSSセレクタはlabelのCSSと一致させる。
好きなCSSを設定可能

完成イメージ

追記 アップロードしたいファイルを選んだ後にファイル名を表示させる

デフォルト機能のようにセレクトしたファイル名を表示させたい場合
ファイル名を表示するためのなどを追記、javascriptで表示させる必要がある

ファイル名を表示させるための場所

<span id="file-selected"></span>

以下の記述がファイル名を表示させる機能

$('#file-upload').bind('change', function () { var fileName = ''; fileName = $(this).val(); $('#file-selected').html(fileName); })

(補足)HTML内にインラインで記述したい場合

javascriptを読み込むのを忘れないこと
これを忘れると以下のエラーが出る
Uncaught ReferenceError: $ is not defined

インライン表記の場合

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script>
$('#file-upload').bind('change', function () { var fileName = ''; fileName = $(this).val(); $('#file-selected').html(fileName); })
</script>

上記をhtml内ボディ閉じタグの上あたりに記述

完成イメージ