How to Customize Bootstrap 4\'s File Input Component?

Getting around the limitations of Bootstrap 4's File Input

Bootstrap 4 provides a custom file input component to simplify file selection for users. However, if you're looking to customize the "Choose file..." placeholder text or display the chosen file's name, you might encounter some challenges.

Changing the Placeholders in Bootstrap 4.1 and above

Since Bootstrap 4.1, the placeholder text resides in the custom-file-label element. You can override it with CSS:

<code class="css">.custom-file-label::after {
  content: "Select file...";
}</code>

Tweaking File Button Text

Bootstrap 4.1 doesn't offer a straightforward method to alter the file button text. To achieve this, consider adding some custom styling:

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

Displaying Selected File Name in Bootstrap 4.4

Bootstrap 4.4 allows you to display the chosen file's name using plain JavaScript:

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

Pre-Bootstrap 4.1 Options:

Hiding Initial Placeholder:

<code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}</code>

Displaying Selected File Name:

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

These approaches provide flexibility in customizing Bootstrap 4's file input component, enabling you to tailor it to your specific requirements.

The above is the detailed content of How to Customize Bootstrap 4\'s File Input Component?. For more information, please follow other related articles on the PHP Chinese website!