Wie passt man den Platzhalter „Datei auswählen...' in der Bootstrap 4-Dateieingabe an?

Überwindung der Herausforderungen der Bootstrap 4-Dateieingabe

In Bootstrap 4 zeigt der Dateibrowser den dauerhaften Text „Datei auswählen...“ an. Trotz Dateiauswahl. Dieses Problem ist auf den versteckten Wert in der CSS-Klasse „custom-file-control“ zurückzuführen. Während es möglich ist, den Wert der ausgewählten Datei mithilfe von JavaScript abzurufen, kann das Ändern des Platzhaltertexts komplexer sein.

Anpassen des Platzhaltertexts und der Schaltflächenanzeige (Bootstrap 4.1)

Mit der Einführung von Bootstrap 4.1 befindet sich der Platzhalter „Choose file…“ in der Klasse „custom-file-label“. Um diesen Text zu ändern, fügen Sie einfach benutzerdefiniertes CSS oder SASS wie folgt hinzu:

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

Adressieren des versteckten Platzhalterwerts

Bootstrap 4 Alpha 6 (Originalantwort )

1. Ändern des ursprünglichen Platzhalter- und Schaltflächentextes:

Der anfängliche Platzhalter- und Schaltflächentext wird in CSS-Pseudoelementen gespeichert. Um sie anzupassen, überschreiben Sie die Standardwerte mit den Selektoren :lang(en)::after und :lang(en)::before.

<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 abrufen und Eingabe aktualisieren:

Sobald eine Datei ausgewählt wurde, kann ihr Name mithilfe von JavaScript abgerufen werden. Da es sich bei dem Platzhalter jedoch um ein Pseudoelement handelt, gibt es keine direkte Möglichkeit, ihn über JavaScript zu manipulieren. Erstellen Sie stattdessen eine zusätzliche CSS-Klasse, um den Platzhalter auszublenden, sobald eine Datei ausgewählt ist:

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

Nach der Dateiauswahl schalten Sie die .selected-Klasse im .custom-file-control mit jQuery um, um den Platzhalter auszublenden und Zeigen Sie den Dateinamen an:

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

Bootstrap 5

Die benutzerdefinierte Dateieingabe wurde in Bootstrap 5 entfernt. Um den Platzhaltertext zu ändern, können Sie JavaScript oder verwenden benutzerdefiniertes CSS. Zum Beispiel:

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

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