当我们需要在网站或应用程序中允许用户上传文件时，“input file”就是我们常用的选择。但是，由于HTML对这个输入元素的控制非常有限，因此我们可以使用CSS3和JavaScript来扩展并样式化它。
HTML结构
首先，我们需要了解HTML中“input file”元素的基本结构。通常，“input file”元素将包括一个“input”标签和一个“label”标签，例如：
<label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> 选择文件 </label> <input id="file-upload" type="file"/>
这里我们使用一个带有Font Awesome图标的“label”元素来模拟一个定制化的“input file”按钮，并给这个标签添加了一个类名以便于之后进行样式处理。同时，“label”元素的“for”属性值应该与“input”元素的“id”属性相同，以便于当单击“label”元素时，能够激活“input”元素。
使用CSS3样式化
接下来，我们可以使用CSS3来进一步样式化“input file”元素。由于这个输入元素的默认外观因浏览器而异，我们实际上需要将其隐藏起来，而不是直接更改样式。然后，我们可以为“label”元素添加一个自定义的样式，并使用伪元素（:before和:after）来模拟“input file”按钮的外观。
-- -------------------- ---- ------- -- ----- ----- ---- -- -- ------------------ - -------- ----- - -- ---- ----- ---- -- -- ------------------- - -------- ------------- -------- --- ----- ------- -------- ------ ----- ----------------- -------- ------------- -------- -------------- ---- - -- -- ----- ---- ----- -- -------------------------- - -------- ------- -
通过以上的CSS代码，我们可以自定义“input file”按钮的背景颜色、文字颜色、边框颜色、以及圆角。此外，我们还可以使用:before伪元素来添加一个文本标签作为按钮的图标。
使用JavaScript实现交互
最后，我们可以使用JavaScript来实现更高级的交互效果。例如，当用户选择了文件之后，我们可以在“label”元素中显示所选的文件名称。
document.getElementById("file-upload").onchange = function () {
document.getElementById("custom-file-upload").innerHTML = this.files[0].name;
};通过这段JavaScript代码，我们可以捕获“input”元素的值，并将其显示在“label”元素中。
结语
通过上述步骤，我们可以对“input file”元素进行自定义样式化，并使用JavaScript来增强用户的交互体验。这将使我们的网站或应用程序更加美观和易于使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27190