I'm currently working on customizing the appearance of the browse file control, aiming to replace it with a simple "add files" button. Here is the markup I have added so far. It seems to be functioning correctly, but I am facing an issue where the div element, being a block level element, requires me to specify its width in order to restrict it.
After experimenting with changing the div to a span element, the UI looks better. However, the overflow:hidden property is not behaving as expected, causing the hidden area (with opacity:0) of the upload control to remain clickable.
If anyone could provide insight into why this behavior is occurring and offer a solution, that would be greatly appreciated. My preference would be to replace the div with an anchor tag instead of a span. Would this work without causing any click event handling issues?
<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>