Jak lze stylizovat prvek input pro nahrávání souborů…

Stilizace standardního <input type="file"> je kvůli omezením prohlížečů obtížná. Nejlepší přístup je skrýt standardní prvek a použít jiný prvek (například <label> nebo tlačítko) k vyvolání dialogu výběru souboru.

Skrýt standardní <input type="file">:

.file-input {
  display: none; /* Nebo visibility: hidden; height: 0; width: 0; pro přístupnost */
}

Vytvořit stylizovaný prvek (například <label>) a propojit ho s <input> přes atribut for:

<label for="upload-button" class="custom-upload-button">
  Vybrat soubor
</label>
<input type="file" id="upload-button" class="file-input">

Stylizovat vytvořený prvek:

.custom-upload-button {
  display: inline-block; /* Nebo block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Příklad */
  /* Další styly podle potřeby */
}

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

(Volitelné) Zobrazit název vybraného souboru:

Posluchač události change na <input type="file"> umožňuje získat informace o vybraném souboru a zobrazit jeho název.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Element pro zobrazení

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Soubor nebyl vybrán';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Soubor nebyl vybrán</span>

Tato metoda poskytuje úplnou kontrolu nad vzhledem prvku nahrávání souborů a zachovává výchozí chování prohlížeče.

Jak lze stylizovat prvek input pro nahrávání souborů?