Wie ändere ich den Text „Datei auswählen...“ in der Bootstrap 4-Dateieingabe?

Bootstrap 4-Dateieingabe: „Datei auswählen“ anpassen...

Benutzerdefinierte Dateieingaben in Bootstrap 4 haben einen Platzhaltertext „Datei auswählen“. ...“ das kann schwierig zu ändern sein. Lassen Sie uns zwei verschiedene Themen untersuchen:

1. Ändern des anfänglichen Platzhalter- und Schaltflächentextes

Bootstrap 4 legt den anfänglichen Platzhalter- und Schaltflächentext über CSS-Pseudoelemente basierend auf der HTML-Sprache fest. Um diese Werte zu überschreiben, verwenden Sie benutzerdefiniertes 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. Ausgewählten Dateinamen anzeigen

Um den ausgewählten Dateinamen zu erhalten, verwenden Sie JavaScript/jQuery:

<code class="JavaScript">$('.custom-file-input').on('change', function() {
  var fileName = $(this).val();
});</code>

Eine direkte Manipulation des Platzhaltertextes der Eingabe ist jedoch nicht möglich. Verwenden Sie stattdessen eine andere CSS-Klasse, um den anfänglichen Platzhalter auszublenden, sobald eine Datei ausgewählt ist, und den Dateinamen in einem nahegelegenen Element anzuzeigen:

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

Dadurch wird die Standardeinstellung „Datei auswählen...“ ausgeblendet. Text und zeigt den ausgewählten Dateinamen an. Sie können dann nach Bedarf weitere Aktionen wie das Hochladen der Datei oder die erneute Auswahl durchführen.

Das obige ist der detaillierte Inhalt vonWie ändere ich den Text „Datei auswählen...“ in der Bootstrap 4-Dateieingabe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!