目的
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内ボディ閉じタグの上あたりに記述
完成イメージ
↧