Getting uniform look for input file control using CSS and HTML_问答_开发者

Getting uniform look for input file control using CSS and HTML

开发者 https://www.devze.com 2023-03-06 17:29 出处：网络

I am trying to customize the look of browse file control and replace it to simple \" add files\" button. I have added the following markup. It works well however with \"div\" its block level element a

相关专题：css

I am trying to customize the look of browse file control and replace it to simple " add files" button. I have added the following markup. It works well however with "div" its block level element and i need to specify the width for div to restrict its width.

I have tried to change div to span. UI looks good however the overflow:hidden thing is not working correctly making the hidden(with opacity:0) area of upload control to be clickable.

Can someone let me know why is this behavior? Is there a way to fix it? I would prefer "div" be replace with "a" instead of "span". Will it be ok? or click events will cause any issue for handling event?

<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开发者_Go百科="file" multiple="true" class="file-control">
        </div>
    </body>
</html>

I think you'll have issues styling input type file because browsers handle the input type differently. Unlike the regular input, different browsers add different things. You might need to use a different method for adding files.