Πώς μπορεί να στιλιζαριστεί ένα στοιχείο input για φόρτωση αρχείων;

Ο στυλιζάρισμα του <input type="file"> είναι δύσκολο λόγω των περιορισμών των browsers. Η καλύτερη προσέγγιση είναι να κρύψετε το τυπικό στοιχείο και να χρησιμοποιήσετε ένα άλλο στοιχείο (π.χ., <label> ή κουμπί) για να ανοίξετε το διάλογο επιλογής αρχείου.

1. Κρύψτε το τυπικό <input type="file">:

.file-input {
  display: none; /* Ή visibility: hidden; height: 0; width: 0; για προσβασιμότητα */
}

2. Δημιουργήστε ένα στιλιζαρισμένο στοιχείο (π.χ., <label>) και συνδέστε το με το <input> μέσω του attribute for:

<label for="upload-button" class="custom-upload-button">
  Επιλογή αρχείου
</label>
<input type="file" id="upload-button" class="file-input">

3. Στυλιζάρετε το δημιουργημένο στοιχείο:

.custom-upload-button {
  display: inline-block; /* Ή block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Παράδειγμα */
  /* Επιπλέον στυλ αν χρειάζεται */
}

.custom-upload-button:hover {
  background-color: #0056b3;
}

4. (Προαιρετικά) Εμφανίστε το όνομα του επιλεγμένου αρχείου:

Ο ακροατής συμβάντων change στο <input type="file"> επιτρέπει την απόκτηση πληροφοριών σχετικά με το επιλεγμένο αρχείο και την εμφάνιση του ονόματός του.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Στοιχείο εμφάνισης

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Δεν έχει επιλεγεί αρχείο';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Δεν έχει επιλεγεί αρχείο</span>

Αυτή η μέθοδος παρέχει πλήρη έλεγχο της εμφάνισης του στοιχείου φόρτωσης αρχείων, διατηρώντας τη βασική συμπεριφορά του browser.