How to change "Choose file" text using Bootstrap 5

Question

Is it impossible change choose file text of input file in Bootstrap 5 using CSS like Bootstrap 4?

And how can I add a margin to "No file chosen"?

Answer 1

Bootstrap 5 + some CSS

1. Compose Bootstrap's custom file input with custom label.
2. Hide default Choose file button with the ::file-selector-button pseudo-element. There are pseudo-elements ::-webkit-file-upload-button and ::-ms-browse for older versions of Chrome/Opera/Safari and Edge/IE respectively. But bootstrap.css uses ::file-selector-button and ::-webkit-file-upload-button only. So I propose to do the same.
3. Add some more CSS for the :hover effect and for the thin border between the label and the input field.

Tested in Chrome, Firefox and Edge.

https://codepen.io/glebkema/pen/VwMQWGE

.custom-file-button input[type=file] {
  margin-left: -2px !important;
}

.custom-file-button input[type=file]::-webkit-file-upload-button {
  display: none;
}

.custom-file-button input[type=file]::file-selector-button {
  display: none;
}

.custom-file-button:hover label {
  background-color: #dde0e3;
  cursor: pointer;
}

<div class="container py-3">

  <div class="input-group custom-file-button">
    <label class="input-group-text" for="inputGroupFile">Your Custom Text</label>
    <input type="file" class="form-control" id="inputGroupFile">
  </div>

</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

Answer 2

If the file input is placed inside the label element and then hidden the label itself will act as the file input when it is clicked. Adding the form-control class and the tabindex attribute (which specifies that the element can be focused) to the label will then style it like a generic Bootstrap input.

<div class="input-group">
  <span class="input-group-text">Custom Add-on Text</span>
  <label class="form-control" tabindex="0">Custom Input Text
    <input type="file" class="invisible">
  </label>
</div>

https://codepen.io/yetiface/pen/PoQqrda

This solution has its downsides, for example the label element will not automatically receive bootstrap styles specifically for input[type='file']. However it is such a simple method that I felt it worth posting for those who it can help.