Bootstrap 4 ファイル入力の「ファイルを選択...」プレースホルダーをカスタマイズするにはどうすればよいですか?

Bootstrap 4 ファイル入力の課題を克服する

Bootstrap 4 では、ファイル ブラウザに永続的なテキスト「ファイルを選択...」が表示されます。ファイルを選択したにもかかわらず。この問題は、custom-file-control CSS クラス内の非表示の値に起因します。 JavaScript を使用して選択したファイルの値を取得することは可能ですが、プレースホルダー テキストの変更はより複雑になる可能性があります。

プレースホルダー テキストとボタン表示のカスタマイズ (Bootstrap 4.1)

Bootstrap 4.1 の導入により、「Choose file...」プレースホルダーは、custom-file-label クラスに常駐します。このテキストを変更するには、次のようにカスタム CSS または SASS を追加するだけです:

<code class="css">.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}</code>

Addressing the Hidden Placeholder Value

Bootstrap 4 Alpha 6 (元の回答) )

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

初期のプレースホルダーとボタンのテキストは CSS 擬似要素に保存されます。カスタマイズするには、:lang(en)::after セレクターと :lang(en)::before セレクターをそれぞれ使用してデフォルト値をオーバーライドします。

<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 を使用してその名前を取得できます。ただし、プレースホルダーは擬似要素であるため、JavaScript を介してプレースホルダーを直接操作する方法はありません。代わりに、ファイルが選択されたときにプレースホルダーを非表示にする追加の CSS クラスを作成します。

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

ファイルの選択時に、jQuery を使用して .custom-file-control の .selected クラスを切り替えてプレースホルダーを非表示にし、ファイル名を表示します:

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

Bootstrap 5

Bootstrap 5 ではカスタム ファイル入力が削除されました。プレースホルダー テキストを変更するには、JavaScript またはカスタムCSS。例:

<code class="css">.custom-file-input::after {
    content: "Button Text";
}</code>

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