Wie kann ich Dateieingabeelemente mit CSS3 und JavaScript formatieren?

Eingabedateielemente mit CSS3 und JavaScript gestalten

Das Gestalten nativer HTML-Eingabeelemente, wie etwa der Dateieingabe, kann eine Herausforderung sein. Es ist jedoch möglich, ihr Erscheinungsbild zu verbessern und mithilfe von CSS3 und JavaScript ein benutzerdefiniertes Dateiauswahlerlebnis zu erstellen.

CSS3-Option zur Gestaltung der Dateieingabe

CSS3 bietet keine direkte Möglichkeit Unterstützung für die Formatierung von Dateieingabeelementen. Es ist jedoch möglich, das Pseudoelement ::-webkit-file-upload-button in Browsern zu verwenden, die die WebKit-Rendering-Engine unterstützen (z. B. Chrome, Safari).

::-webkit-file-upload-button {
  background-color: #00f;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 10px;
}

JavaScript Option zur Dateiauswahl

Ein alternativer Ansatz besteht darin, ein benutzerdefiniertes div-Element zu erstellen, das die Dateieingabe auslöst, wenn angeklickt.

<div><pre class="brush:php;toolbar:false">document.getElementById('file-button').addEventListener('click', () => {
  document.getElementById('file-input').click();
});

document.getElementById('file-input').addEventListener('change', () => {
  const filename = document.getElementById('file-input').value.split('\').pop();
  document.getElementById('file-button').textContent = filename;
});