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

CSS3 と JavaScript を使用した入力ファイルのスタイル

CSS3 を使用してデフォルトの「入力ファイル」要素のスタイルを設定することは可能ですが、カスタマイズ オプションは次のとおりです。限定。ファイル入力の外観を完全にカスタマイズしたり、代替要素で閲覧ウィンドウをトリガーするには、HTML、CSS3、JavaScript を使用してそれを実現する方法を次に示します:

jQuery を使用したカスタマイズ

1. HTML: デフォルトのファイル入力とカスタムとして機能する div 要素の両方を挿入します。 button.

<div>

2. CSS: デフォルトのファイル入力を非表示にします。

#file {
    display: none;
}

3. jQuery : 誤ってクリックされるのを防ぐために、ファイル入力を非表示のディメンションを持つ div でラップします。 Change イベントを使用して、選択したファイル パスでカスタム ボタンのテキストを更新します。カスタム ボタンがクリックされたときにファイル入力クリック イベントをトリガーします。

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

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

$('#file').click(function() {
    fileInput.click();
}).show();

結果:

CSS を通じてカスタマイズできるカスタム ファイル入力要素クリックするとファイル参照ウィンドウがトリガーされます。

以上がCSS3 と JavaScript を使用してファイル入力の外観をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。