Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-10-30 18:50:02
Original
658 Leute haben es durchsucht

How to Change the

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
<code class="JavaScript">$('.custom-file-input').on('change', function() {
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
});</code>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!