Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich die Dateieingabekomponente von Bootstrap 4 anpassen?

DDD
Freigeben: 2024-10-29 21:42:03
Original
607 Leute haben es durchsucht

How to Customize Bootstrap 4's File Input Component?

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

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

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

Optionen vor Bootstrap 4.1:

Anfangsplatzhalter ausblenden:

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

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

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!

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