ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。