ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS と JavaScript を使用して HTML5 ファイル入力をカスタマイズするにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-23 01:21:14
オリジナル
739 人が閲覧しました

How Can I Customize the HTML5 File Input Using CSS and JavaScript?

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

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

CSS3 スタイリング

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

input[type="file"] {
    display: none;
}
ログイン後にコピー

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

JavaScript/jQuery 実装

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

<div>
ログイン後にコピー
#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();
ログイン後にコピー

このスクリプトは、元の入力ファイル コンポーネントを非表示にし、「Choose File」というラベルの付いたクリック可能な div を作成します。 div をクリックすると、ファイル ブラウザが開きます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート