How to change "Choose file" text using Bootstrap 5

Morteza Negahi picture Morteza Negahi · Jan 18, 2021 · Viewed 8k times · Source

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

enter image description here

Answer

Gleb Kemarsky picture Gleb Kemarsky · Dec 29, 2021

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