如何使用 CSS3 和 JavaScript 设置文件输入元素的样式？

使用 CSS3 和 JavaScript 设置输入文件元素的样式

设置原生 HTML 输入元素（例如文件输入）的样式可能具有挑战性。但是，可以使用 CSS3 和 JavaScript 来增强它们的外观并创建自定义文件选择体验。

用于设置文件输入样式的 CSS3 选项

CSS3 不提供直接支持样式文件输入元素。但是，可以在支持 WebKit 渲染引擎的浏览器（例如 Chrome、Safari）中使用 ::-webkit-file-upload-button 伪元素。

::-webkit-file-upload-button {
  background-color: #00f;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 10px;
}

JavaScript文件选择选项

另一种方法是创建一个自定义 div 元素，在以下情况下触发文件输入单击。

<div><pre class="brush:php;toolbar:false">document.getElementById('file-button').addEventListener('click', () => {
  document.getElementById('file-input').click();
});

document.getElementById('file-input').addEventListener('change', () => {
  const filename = document.getElementById('file-input').value.split('\').pop();
  document.getElementById('file-button').textContent = filename;
});