Kaip galima stilizuoti input elementą failų įkėlimui…

Standartinio <input type="file"> stiliaus keitimas yra sudėtingas dėl naršyklių apribojimų. Geriausias būdas yra paslėpti standartinį elementą ir naudoti kitą elementą (pvz., <label> arba mygtuką), kuris iškvies failo pasirinkimo dialogą.

Paslėpti standartinį <input type="file">:

.file-input {
  display: none; /* Arba visibility: hidden; height: 0; width: 0; prieinamumui */
}

Sukurti stilizuotą elementą (pvz., <label>) ir susieti jį su <input> per for atributą:

<label for="upload-button" class="custom-upload-button">
  Pasirinkti failą
</label>
<input type="file" id="upload-button" class="file-input">

Stilizuoti sukurtą elementą:

.custom-upload-button {
  display: inline-block; /* Arba block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Pavyzdys */
  /* Papildomi stiliai pagal poreikį */
}

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

(Pasirinktinai) Rodyti pasirinkto failo pavadinimą:

change įvykio stebėtojas <input type="file"> leidžia gauti informaciją apie pasirinktą failą ir jį parodyti kitur.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Rodymo elementas

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Failas nepasirinktas';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Failas nepasirinktas</span>

Šis metodas suteikia pilną kontrolę virš failo įkėlimo elemento išvaizdos, išlaikant naršyklės standartinį elgesį.

Kaip galima stilizuoti input elementą failų įkėlimui?