Getting uniform look for input file control using CSS and HTML
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.
加载中,请稍侯......
精彩评论