Bootstrap 4 のファイル入力コンポーネントをカスタマイズするにはどうすればよいですか?

Bootstrap 4 のファイル入力の制限を回避する

Bootstrap 4 は、ユーザーのファイル選択を簡素化するカスタム ファイル入力コンポーネントを提供します。ただし、「ファイルを選択...」プレースホルダー テキストをカスタマイズしたり、選択したファイルの名前を表示したりする場合は、いくつかの課題が発生する可能性があります。

Bootstrap 4.1 以降でのプレースホルダーの変更

Bootstrap 4.1 以降、プレースホルダー テキストは、custom-file-label 要素内に存在します。 CSS でオーバーライドできます:

<code class="css">.custom-file-label::after {
  content: "Select file...";
}</code>

ファイル ボタン テキストの調整

Bootstrap 4.1 には、ファイル ボタン テキストを変更する簡単な方法がありません。これを実現するには、カスタム スタイルを追加することを検討してください。

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

Bootstrap 4.4 で選択したファイル名を表示する

Bootstrap 4.4 では、選択したファイルの名前をプレーンな形式で表示できます。 JavaScript:

<code class="javascript">document.querySelector('.custom-file-input').addEventListener('change', function(e) {
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})</code>

Pre-Bootstrap 4.1 オプション:

初期プレースホルダーの非表示:

<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 のファイル入力コンポーネントを柔軟にカスタマイズでき、特定の要件に合わせてカスタマイズできます。

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