How to Modify the File Selector Display in Bootstrap?

Bootstrap File Input: Modifying File Selector Display

When utilizing Bootstrap 4's file browser, you may encounter the issue of displaying the default "Choose file..." text. This text is set using CSS in the .custom-file-control element, which can be difficult to modify using JavaScript.

Bootstrap 5

In Bootstrap 5, custom file input has been removed. Therefore, modifying the file selector display requires custom CSS or JavaScript techniques.

Bootstrap 4.4

To display the selected filename in Bootstrap 4.4, JavaScript can be used:

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

Bootstrap 4.1

In Bootstrap 4.1 onwards, the "Choose file..." placeholder is set in the .custom-file-label element:

<code class="html"><label class="custom-file-label" for="exampleInputFile">
  Select file...
</label></code>

Changing the button text can be done with CSS:

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

Original Answer (Bootstrap 4 Alpha 6)

To modify the initial placeholder and button text, CSS can be utilized:

<code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}</code>

To retrieve the selected filename and update the display, JavaScript can be used:

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

However, as the placeholder text is a pseudo element, JavaScript cannot directly modify it. A workaround is to add a CSS class that hides the pseudo content and place the filename in the .form-control-file span:

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

The above is the detailed content of How to Modify the File Selector Display in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!