CSS と JavaScript を使用して HTML5 ファイル入力をカスタマイズするにはどうすればよいですか?

CSS3 と Javascript を使用した「入力ファイル」コンポーネントのカスタマイズ

のスタイル設定CSS3とJavaScriptを使用したコンポーネントが可能です。あるいは、クリック時にファイル ブラウザを起動するスタイル付き div を作成することもできます。

CSS3 スタイリング

入力ファイル コンポーネントをスタイルするには、CSS3 を使用できます。たとえば、次のスタイルを適用できます:

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

これにより、デフォルトのファイル入力コンポーネントが非表示になります。

JavaScript/jQuery 実装

JavaScript または jQuery を使用すると、 の機能を強化できます。成分。たとえば、クリックされたときにファイル ブラウザを起動する div を作成できます。

<div>
<pre class="brush:php;toolbar:false">#file {
    display: none;
}

var wrapper = $('<div>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $this = $(this);
    $('#file').text($this.val());
});

$('#file').click(function() {
    fileInput.click();
}).show();<p>このスクリプトは、元の入力ファイル コンポーネントを非表示にし、「Choose File」というラベルの付いたクリック可能な div を作成します。 div をクリックすると、ファイル ブラウザが開きます。</p>
</div>