html - 现代浏览器中的样式输入类型 "file"

Question

<分区>

Answer 1

正如我在评论部分所说，您需要一个 label 标记以及一些 CSS 来实现这一目的。事实上，您需要 JavaScript 来为您的UI 注入(inject)活力。

所以，我在这里为您制作一个演示:

const inputFile = document.querySelector('.my-file'),
  label = document.querySelector('.custom-input'),
  icon = label.querySelector('.label-icon'),
  text = label.querySelector('.label-text');
inputFile.addEventListener('change', () => {
  text.textContent = 'Please, choose a file.';
  if (inputFile.files.length === 1) {
    text.textContent = inputFile.files[0].name.toUpperCase();
    text.classList.add('attached');
    icon.classList.add('attached');
  } else {
    text.classList.remove('attached');
    icon.classList.remove('attached');
  }
});

.container {
  padding: 12px 6px;
  background-color: #f6f6f6;
}

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  border: 1px solid #dedede;
  border-radius: 6px;
  overflow: hidden;
}

.wrapper .my-file {
  display: none;
}

.wrapper .custom-input {
  background-color: #fff;
  flex: 1;
  cursor: pointer;
}

.wrapper .custom-input .label-icon {
  display: inline-block;
  padding: 15px;
  background-color: #fde4af;
  color: #181818;
  transition: all .4s 0s ease;
}

.wrapper .custom-input .label-icon.attached {
  background-color: #e6ac2d;
  color: #fff;
}

.wrapper .custom-input .label-icon.attached > .fa {
  text-shadow: 0 0 15px rgba(24, 24, 24, .35);
}

.wrapper .custom-input .label-text {
  display: inline-block;
  padding: 4px;
  transition: all .4s 0s ease;
}

.wrapper .custom-input .label-text.attached {
  font-weight: 600;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
<div class="container">
  <form action="#" id="my-form">
    <div class="wrapper">
      <input type="file" id="my-file" name="my-file" class="my-file" />
      <label for="my-file" class="custom-input">
      <span class="label-icon">
        <i class="fa fa-folder"></i>
      </span>
      <span class="label-text">Please, choose a file.</span>
    </label>
    </div>
  </form>
</div>

希望我能进一步插入您，并在此等待进一步的解释。