Как може да се стилизира елементът input за качване на файлове?

Стилзирането на стандартния <input type="file"> е трудно поради ограниченията на браузърите. Най-добрият подход е да скриете стандартния елемент и да използвате друг елемент (например <label> или бутон), за да извикате диалога за избор на файл.

1. Скрийте стандартния <input type="file">:

.file-input {
  display: none; /* Или visibility: hidden; height: 0; width: 0; за достъпност */
}

2. Създайте стилизиран елемент (например <label>) и го свържете с <input> чрез атрибута for:

<label for="upload-button" class="custom-upload-button">
  Избери файл
</label>
<input type="file" id="upload-button" class="file-input">

3. Стилізирайте създадения елемент:

.custom-upload-button {
  display: inline-block; /* Или block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Пример */
  /* Допълнителни стилове по желание */
}

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

4. (По желание) Покажете името на избрания файл:

Обработчикът на събитие change за <input type="file"> позволява да получите информация за файла и да покажете името му.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Елемент за показване

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Файл не е избран';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Файл не е избран</span>

Този метод осигурява пълен контрол върху външния вид на елемента за качване на файлове, като същевременно запазва стандартното поведение на браузъра.