Как сделать красивый input type='file' через css и js?

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>

 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;
}

 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 = 'Файл не выбран';
  }
  
  // Другие операции с выбранным файлом...
});

1
2
3
4
5
6

<div class="file-upload">
  <label for="file-input" class="file-label">
    <span class="file-text">Выберите файл</span>
    <input type="file" id="file-input" class="file-input">
  </label>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.file-upload {
  display: inline-block;
}

.file-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}

.file-input {
  display: none;
}

.file-text {
  pointer-events: none; /* отключает действия на тексте */
}

.file-label:hover {
  background-color: #2980b9;
}