HTML5から新たに追加されたFormパーツの一つ【File】。
基本的にFormのパーツはカスタマズしずらいです。
(各ブラウザのデフォルトCSSが設定されているから)
でも、さすがにブラウザごとの挙動任せで
「デザインしないのもなんだかなー」ということで
どうにかして【File】をカスタマイズできないか色々と探して見た結果、
下記のサイトが引っかかりました。
Pretty file input field in Bootstrap
(英語サイトです)
サンプルコード
<input id="file" type="file" style="display: none;" /> <div id="btn"> 画像を選択 </div> <script> $( "#btn" ).click( function() { $( "#file" ).click(); }); </script>
解説
やっていることは単純で
# No.01
【File】自体を『display: none;』で非表示にする
# No.02
カスタマイズした独自ボタンを生成する
# No.03
No.02で作った独自ボタンのイベント[onClick]時に【File】のクリックを行う
です。
※今回のサンプルではjQueryありきで書きました。