Dosya yükleme için input öğesi nasıl stilize edilir?

Varsayılan <input type="file"> stilizasyonu, tarayıcı kısıtlamaları nedeniyle zordur. En iyi yaklaşım, standart öğeyi gizlemek ve dosya seçim diyaloğunu tetiklemek için başka bir öğe (örneğin, <label> veya düğme) kullanmaktır.

1. Standart <input type="file"> öğesini gizleyin:

.file-input {
  display: none; /* Veya erişilebilirlik için visibility: hidden; height: 0; width: 0; */
}

2. Stilize edilmiş bir öğe (örneğin, <label>) oluşturun ve for özniteliği ile <input> ile bağlayın:

<label for="upload-button" class="custom-upload-button">
  Dosya seç
</label>
<input type="file" id="upload-button" class="file-input">

3. Oluşturulan öğeyi stilize edin:

.custom-upload-button {
  display: inline-block; /* veya block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Örnek */
  /* Ekstra stiller gerekirse */
}

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

4. (İsteğe bağlı) Seçilen dosya adını gösterin:

change olayı dinleyicisi, <input type="file"> üzerinde, seçilen dosya hakkında bilgi almayı ve adını göstermeyi sağlar.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Gösterim öğesi

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

<span id="file-name">Dosya seçilmedi</span>

Bu yöntem, dosya yükleme öğesinin görünümünü tam kontrol etmenizi sağlar ve tarayıcının varsayılan davranışını korur.