. Custom-Datei-Input ~ .Custom-file-Label :: After acht { Inhalt: "Schaltfläche Text"; }

adressieren den verborgenen Platzhalter value

bootstrap 4 alpha 6 (Originalantwort)

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

1. Ändern Sie den ersten Platzhalter und Schaltflächentext:

Der anfängliche Platzhalter- und Schaltflächentext wird in CSS-Pseudo-Elementen gespeichert. Um sie anzupassen, überschreiben Sie die Standardwerte mit dem: Lang (en) :: After und: Lang (en) :: vor den Selektoren. Inhalt: "Datei auswählen ..."; } #CustomFile .Custom-File-Control: Lang (en) :: vor {{ Inhalt: "Klicken Sie mich"; }

2. Abrufen des ausgewählten Dateinamennamens und Aktualisierung der Eingabe:

Sobald eine Datei ausgewählt wurde, kann ihr Name mit JavaScript erhalten werden. Da der Platzhalter jedoch ein Pseudoelement ist, gibt es keinen direkten Weg, ihn über JavaScript zu manipulieren. Erstellen Sie stattdessen eine zusätzliche CSS-Klasse, um den Platzhalter zu verbergen, sobald eine Datei ausgewählt ist:

. Custom-File-Control.Selected: Lang (en) :: After acht { Inhalt: ""! Wichtig; }

Upon file selection, toggle the .selected class on the .custom-file-control using jQuery to hide the placeholder and display the file name:

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

$('.custom-file-input').on('change',function(){ var Filename = $ (this) .val (); $ (this) .Next ('. Form-Control-File'). AddClass ("ausgewählt"). HTML (Dateiname); })

bootstrap 5

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

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

. Custom-Datei-Input :: After { Inhalt: "Schaltfläche Text"; }