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

要用CSS3和Javascript设置"输入文件"的样式，可以分为以下几个步骤：

隐藏原始的<input type="file">元素，并为其添加一个自定义类名，以便稍后在Javascript中引用它。

在CSS中设置自定义样式。

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

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

在Javascript中创建一个新的元素，用于显示所选文件的名称。

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

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

监听<input type="file">元素的change事件，以便在用户选择文件时更新自定义标签。

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

现在，当用户点击自定义标签时，将触发隐藏的<input type="file">元素的点击事件，允许用户选择文件。在用户选择文件后，Javascript将更新自定义标签的文本以显示所选文件的名称。

这种方法允许您使用CSS3和Javascript自定义<input type="file">元素的样式，而无需使用任何云计算品牌商。