Bootstrap 4ファイル入力の課題を克服するBootstrap 4のファイルブラウザーは、ファイルの選択にもかかわらず、永続的なテキスト「選択ファイル...」を提示します。この問題は、カスタムファイル制御CSSクラス内の隠された値に起因します。 JavaScriptを使用して選択したファイルの値を取得することは可能ですが、プレースホルダーテキストを変更することはより複雑になる可能性があります。このテキストを変更するには、次のようにカスタムCSSまたはSASSを追加するだけです。 コンテンツ：「ボタンテキスト」; }

隠されたプレースホルダー値

4 alpha 6（元の回答）

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

最初のプレースホルダーとボタンテキストは、CSS擬似要素に保存されます。それらをカスタマイズするには、それぞれ：lang（en）:: and：lang（en）:: selectorsのそれぞれを使用してデフォルト値をオーバーライドします。 コンテンツ：「ファイルを選択...」; } #customfile .custom-file-control：lang（en）:: before { コンテンツ：「私をクリック」。 }

ファイルが選択されたら、その名前はJavaScriptを使用して取得できます。ただし、プレースホルダーが擬似要素であるため、JavaScriptを介してそれを操作する直接的な方法はありません。代わりに、ファイルが選択されたらプレースホルダーを非表示にするために追加のCSSクラスを作成します。 コンテンツ： ""！重要; }

ファイルの選択時に、jQueryを使用して.custom-file-controlで選択したクラスをプレースホルダーを非表示にして表示し、

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

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

カスタムファイル入力がbootstrap 5で削除されました。例：