Home > Article > Web Front-end > 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!