Jak można wystylizować element input do ładowania plików?

Stylizacja standardowego <input type="file"> jest trudna ze względu na ograniczenia przeglądarek. Najlepszym rozwiązaniem jest ukrycie standardowego elementu i użycie innego elementu (np. <label> lub przycisku) do wywołania okna dialogowego wyboru pliku.

1. Ukryj standardowy <input type="file">:

.file-input {
  display: none; /* Lub visibility: hidden; height: 0; width: 0; dla dostępności */
}

2. Utwórz stylizowany element (np. <label>) i powiąż go z <input> za pomocą atrybutu for:

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

3. Stylizuj utworzony element:

.custom-upload-button {
  display: inline-block; /* lub block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Przykład */
  /* Dodatkowe style w razie potrzeby */
}

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

4. (Opcjonalnie) Wyświetl nazwę wybranego pliku:

Nasłuchiwacz zdarzenia change na <input type="file"> pozwala uzyskać informacje o wybranym pliku i wyświetlić jego nazwę.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Element do wyświetlenia

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

<span id="file-name">Brak pliku</span>

Ta metoda zapewnia pełną kontrolę nad wyglądem elementu ładowania plików, zachowując domyślne zachowanie przeglądarki.