Hogyan lehet stílusozni egy input elemet fájlok feltöltéséhez?

A standard <input type="file"> elem stilizálása nehéz a böngészők korlátozásai miatt. A legjobb megoldás az, hogy elrejtjük az alapértelmezett elemet, és egy másik elemet (például <label> vagy gomb) használunk a fájl kiválasztó dialógus meghívására.

1. Rejtse el az alapértelmezett <input type="file">-t:

.file-input {
  display: none; /* Vagy visibility: hidden; height: 0; width: 0; az akadálymentesség érdekében */
}

2. Hozzon létre egy stílusosított elemet (például <label>), és kötse össze az <input>-tel a for attribútummal:

<label for="upload-button" class="custom-upload-button">
  Fájl kiválasztása
</label>
<input type="file" id="upload-button" class="file-input">

3. Stílusolja az elkészített elemet:

.custom-upload-button {
  display: inline-block; /* Vagy block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Példa */
  /* További stílusok szükség szerint */
}

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

4. (Opcionális) Mutassa a kiválasztott fájl nevét:

A change eseményfigyelő az <input type="file">-nél lehetővé teszi, hogy információkat szerezzen a kiválasztott fájlról, és megjelenítse a nevét.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Megjelenítő elem

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Nincs kiválasztott fájl';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Nincs kiválasztott fájl</span>

Ez a módszer teljes kontrollt biztosít a fájl feltöltő elem megjelenése felett, miközben megőrzi a böngésző alapértelmezett viselkedését.