Styling the input file

index.html

<p>
  <input id="file" class="visually-hidden" type="file">
  <label for="file">Загрузить файл</label>
</p>
<p>
  <input id="file2" class="visually-hidden" type="file">
  <label for="file2">Загрузить файл</label>
</p>

script.js

const inputFile = document.querySelectorAll('input[type="file"]');

inputFile.forEach(input => input.addEventListener('input', (e) => {
  let file = e.target.files[0].name;
  e.target.nextElementSibling.innerHTML = file;
  e.target.nextElementSibling.classList.add('success');
}))

style.css

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  padding: 50px;
  margin: 0;
  font-family: 'Neucha', cursive;
}

.visually-hidden {
  position: fixed;
  transform: scale(0);
}

input[type="file"] + label {
  display: inline-block;
  width: 200px;
  padding: 0.6em 1em;
  border: none;
  border-radius: 4px;
  background: deepskyblue;
  color: white;
  font-size: 18px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;

  &:hover {
    background: skyblue;
  }
}

.success {
  background: deeppink;
}