如何使用 CSS 和 jQuery 自定义文件输入类型框

答案：使用 CSS Opacity 和 Positioning 方法

默认情况下，不同的 Web 浏览器以不同的方式呈现 HTML <input type="file">，如果您尝试使用 CSS 属性对其进行样式设置，它也不起作用。但是，您可以将 CSS opacity 和 position 属性与 jQuery change() 方法结合使用来创建您自己的跨浏览器一致的 HTML 自定义文件上传表单控件。

让我们看一下以下示例，以了解其基本工作原理：

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom File Input Field with CSS and jQuery</title>
<style>
    .custom-file-input{
        display: inline-block;
        overflow: hidden;
        position: relative;
    }
    .custom-file-input input[type="file"]{
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('.custom-file-input input[type="file"]').change(function(e){
            $(this).siblings('input[type="text"]').val(e.target.files[0].name);
        });
    });
</script>
</head>
<body>
    <form>
        <div class="custom-file-input">
            <input type="file">
            <input type="text">
            <input type="button" value="Attach">
        </div>
    </form>
</body>
</html>

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答：

如何使用 CSS 和 jQuery 自定义文件输入类型框

答案：使用 CSS Opacity 和 Positioning 方法

示例

FAQ 相关问题解答

关于我们

联系方式

互动工具