如何使用 CSS3 和 JavaScript 自定义文件输入外观？

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

虽然可以使用 CSS3 设置默认“输入文件”元​​素的样式，但自定义选项是有限的。要完全自定义文件输入的外观或使用替代元素触发浏览窗口，可以使用以下方法使用 HTML、CSS3 和 JavaScript 来实现：

使用 jQuery 自定义

1. HTML: 插入默认文件输入和将用作自定义的 div 元素按钮。

<div>

2. CSS:隐藏默认文件输入。

#file {
    display: none;
}

3. jQuery : 将文件输入包装在具有隐藏尺寸的 div 中，以防止意外点击。使用更改事件用选定的文件路径更新自定义按钮文本。点击自定义按钮时触发文件输入点击事件。

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

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

$('#file').click(function() {
    fileInput.click();
}).show();

结果：

可通过 CSS 自定义的自定义文件输入元素并在点击时触发文件浏览窗口。

以上是如何使用 CSS3 和 JavaScript 自定义文件输入外观？的详细内容。更多信息请关注PHP中文网其他相关文章！