Ako možno štýlovať prvok input pre nahrávanie súborov?

Štýlovanie štandardného <input type="file"> je zložité kvôli obmedzeniam prehliadačov. Najlepším spôsobom je skryť štandardný prvok a použiť iný prvok (napríklad <label> alebo tlačidlo) na vyvolanie dialógu na výber súboru.

1. Skryte štandardný <input type="file">:

.file-input {
  display: none; /* Alebo visibility: hidden; height: 0; width: 0; pre prístupnosť */
}

2. Vytvorte štýlovaný prvok (napríklad <label>) a prepojte ho s <input> cez atribút for:

<label for="upload-button" class="custom-upload-button">
  Vybrať súbor
</label>
<input type="file" id="upload-button" class="file-input">

3. Štýlizujte vytvorený prvok:

.custom-upload-button {
  display: inline-block; /* Alebo block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Príklad */
  /* Dodatočné štýly podľa potreby */
}

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

4. (Voliteľné) Zobraziť názov vybraného súboru:

Poslucháč udalostí change na <input type="file"> umožňuje získať informácie o vybratom súbore a zobraziť jeho názov.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Element na zobrazenie

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Žiadny súbor vybraný';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Žiadny súbor vybraný</span>

Táto metóda poskytuje úplnú kontrolu nad vzhľadom prvku na nahrávanie súborov, pričom zachováva štandardné správanie prehliadača.