Wie kann ich die Dateieingabekomponente von Bootstrap 4 anpassen?

Umgehen der Einschränkungen der Dateieingabe von Bootstrap 4

Bootstrap 4 bietet eine benutzerdefinierte Dateieingabekomponente, um die Dateiauswahl für Benutzer zu vereinfachen. Wenn Sie jedoch den Platzhaltertext „Datei auswählen...“ anpassen oder den Namen der ausgewählten Datei anzeigen möchten, könnten einige Herausforderungen auftreten.

Ändern der Platzhalter in Bootstrap 4.1 und höher

Seit Bootstrap 4.1 befindet sich der Platzhaltertext im Element „custom-file-label“. Sie können es mit CSS überschreiben:

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

Text der Dateischaltfläche anpassen

Bootstrap 4.1 bietet keine einfache Methode zum Ändern des Texts der Dateischaltfläche. Um dies zu erreichen, sollten Sie erwägen, einen benutzerdefinierten Stil hinzuzufügen:

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

Ausgewählten Dateinamen in Bootstrap 4.4 anzeigen

Mit Bootstrap 4.4 können Sie den Namen der ausgewählten Datei im Klartext anzeigen 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>

Optionen vor Bootstrap 4.1:

Anfangsplatzhalter ausblenden:

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

Ausgewählten Dateinamen anzeigen:

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

Diese Ansätze bieten Flexibilität beim Anpassen der Dateieingabekomponente von Bootstrap 4, sodass Sie sie an Ihre spezifischen Anforderungen anpassen können.

Das obige ist der detaillierte Inhalt vonWie kann ich die Dateieingabekomponente von Bootstrap 4 anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!