如何用CSS3/Javascript设置"输入文件"的样式？

.custom-file-input {
  display: none;
}

.custom-file-label {
  display: inline-block;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

const fileInput = document.getElementById('file-input');
const customFileLabel = document.createElement('span');
customFileLabel.classList.add('custom-file-label');

fileInput.parentNode.insertBefore(customFileLabel, fileInput.nextSibling);

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  if (file) {
    customFileLabel.textContent = file.name;
  } else {
    customFileLabel.textContent = '选择文件';
  }
});