Bootstrap 4 ファイル入力の「ファイルを選択...」テキストを変更するにはどうすればよいですか?

Bootstrap 4 ファイル入力: 「ファイルの選択」のカスタマイズ...

Bootstrap 4 のカスタム ファイル入力には、プレースホルダー テキスト「ファイルを選択」が含まれています...」を変更するのは難しいかもしれません。 2 つの別々の問題を検討してみましょう:

1.初期のプレースホルダーとボタンのテキストの変更

Bootstrap 4 は、HTML 言語に基づいた CSS 擬似要素を通じて、初期のプレースホルダーとボタンのテキストを設定します。これらの値をオーバーライドするには、カスタム CSS:

<code class="CSS">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}</code>

2 を使用します。選択したファイル名の表示

選択したファイル名を取得するには、JavaScript/jQuery を使用します。

<code class="JavaScript">$('.custom-file-input').on('change', function() {
  var fileName = $(this).val();
});</code>

ただし、入力のプレースホルダー テキストを直接操作することはできません。代わりに、別の CSS クラスを使用して、ファイルが選択されると最初のプレースホルダーを非表示にし、近くの要素にファイル名を表示します:

<code class="CSS">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}</code>

<code class="JavaScript">$('.custom-file-input').on('change', function() {
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
});</code>

これにより、デフォルトの「ファイルを選択...」が非表示になります。テキストを入力し、選択したファイル名を表示します。その後、必要に応じて、ファイルのアップロードや再選択などのさらなるアクションを処理できます。

以上がBootstrap 4 ファイル入力の「ファイルを選択...」テキストを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。