How to Change the \"Choose File...\" Text in Bootstrap 4 File Input?

Bootstrap 4 File Input: Customizing 'Choose File'...

Custom file inputs in Bootstrap 4 have a placeholder text "Choose file..." that can be tricky to change. Let's explore two separate issues:

1. Modifying Initial Placeholder and Button Text

Bootstrap 4 sets the initial placeholder and button text through CSS pseudo elements based on the HTML language. To override these values, use custom 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. Displaying Selected File Name

To get the selected file name, use JavaScript/jQuery:

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

However, manipulating the input's placeholder text is not directly possible. Instead, use another CSS class to hide the initial placeholder once a file is selected and display the file name in a nearby element:

<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>

This will hide the default "Choose file..." text and display the selected file name. You can then handle further actions like file upload or re-selection as needed.

The above is the detailed content of How to Change the \"Choose File...\" Text in Bootstrap 4 File Input?. For more information, please follow other related articles on the PHP Chinese website!