[JS]input[type=file]のカスタマイズ

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ありきで書きました。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)