@dorothea_stoltenberg
Для стилизации input type='file' можно использовать следующий подход:
HTML:
1 2 3 4 5 |
<div class="file-upload"> <input type="file" id="file" class="file-input"> <label for="file" class="file-label">Выберите файл</label> <span id="file-name" class="file-name">Файл не выбран</span> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.file-upload { position: relative; display: inline-block; } .file-input { position: absolute; left: 0; top: 0; opacity: 0; } .file-label { display: inline-block; padding: 10px 20px; background-color: #e6e6e6; color: #333; cursor: pointer; } .file-label:hover { background-color: #d4d4d4; } .file-name { display: block; margin-top: 10px; } |
JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
document.getElementById('file').addEventListener('change', function() { var fileInput = this; var fileLabel = document.querySelector('.file-label'); var fileName = document.getElementById('file-name'); if (fileInput.files.length > 0) { fileName.innerText = fileInput.files[0].name; } else { fileName.innerText = 'Файл не выбран'; } // Другие операции с выбранным файлом... }); |
Этот код создает красивую кнопку для выбора файла с подписью и отображением имени выбранного файла. При выборе файла его имя будет отображаться в блоке с id "file-name". Вы можете загрузить выбранный файл с помощью другого кода или добавить другие операции с файлом внутри обработчика события изменения.