Question

我正在尝试自定义浏览文件控件的外观并将其替换为简单的“添加文件”按钮。我添加了以下标记。它适用于“div”其块级元素，我需要指定div的宽度来限制其宽度。

我试图将div改为span。 UI看起来不错，但溢出：隐藏的东西无法正常工作，使上传控件的隐藏（不透明度：0）区域可以点击。

有人能让我知道为什么会这样吗？有办法解决吗？我更希望“div”替换为“a”而不是“span”。会没事吗？或点击事件会导致处理事件的任何问题吗？

<html>
    <head>
        <style>
            .add-files{
                position:relative;
                overflow:hidden;
                width:100px;
                text-align:center;
                border:2px solid black;
            }

            .file-control{
                position:absolute;
                right:0;
                top:-4;
                z-index:1;
                font-size:50px;
                opacity:0;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <div class="add-files">
            Add Files
            <input type="file" multiple="true" class="file-control">
        </div>
    </body>
</html>

Answer 1

我认为你会在设计输入类型文件方面遇到问题，因为浏览器会以不同的方式处理输入类型。与常规输入不同，不同的浏览器添加不同的东西。您可能需要使用其他方法来添加文件。

使用CSS和HTML统一查找输入文件控件

1 个答案: