如何使用 CSS 和 JavaScript 自定义 HTML5 文件输入？

使用 CSS3 和 Javascript 自定义“输入文件”组件

设置 的样式使用 CSS3 和 JavaScript 的组件是可能的。或者，您可以创建一个样式化的 div，单击时会触发文件浏览器。

CSS3 样式

要设置输入文件组件的样式，您可以使用 CSS3。例如，可以应用以下样式：

input[type="file"] {
    display: none;
}

这将隐藏默认的文件输入组件。

JavaScript/jQuery 实现

使用 JavaScript 或 jQuery，您可以增强 的功能。成分。例如，您可以创建一个在单击时触发文件浏览器的 div：

<div>
<pre class="brush:php;toolbar:false">#file {
    display: none;
}

var wrapper = $('<div>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $this = $(this);
    $('#file').text($this.val());
});

$('#file').click(function() {
    fileInput.click();
}).show();<p>此脚本隐藏原始输入文件组件并创建一个标记为“选择文件”的可单击 div。单击 div 时，会打开文件浏览器。</p>
</div>