Kuidas saab stiilida input elementi failide üleslaadimiseks?

Standardselt <input type="file"> stiilimine on keeruline brauserite piirangute tõttu. Parim lähenemine on varjata standardelement ja kasutada teist elementi (näiteks <label> või nupp), mis kutsub esile failivaliku dialoogi.

1. Varjata standard <input type="file">:

.file-input {
  display: none; /* Või visibility: hidden; height: 0; width: 0; juurdepääsetavuse jaoks */
}

2. Luua stiliseeritud element (näiteks <label>) ja siduda see <input>-ga for atribuudi kaudu:

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

3. Stiliseerida loodud elementi:

.custom-upload-button {
  display: inline-block; /* Või block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Näide */
  /* Täiendavad stiilid vastavalt vajadusele */
}

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

4. (Valikuline) Näidata valitud faili nimi:

change sündmuse kuulaja <input type="file">-l võimaldab saada teavet valitud faili kohta ja kuvada selle nime mujal.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Näidiselement

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

<span id="file-name">Faili ei valitud</span>

See meetod võimaldab täielikku kontrolli faili üleslaadimise elemendi välimuse üle, säilitades samal ajal brauseri vaikimisi käitumise.