Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Total input[type=file] style control with pure CSS. File type inputs are notoriously hard to style, due to different semi-serious style restrictions in the name of security (the argument being that a file input presents access to the user's private file system, and should as such always look unambiguously like what it is — redundant if you ask m…
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
<p>
So various methods prevent file upload inputs from being styled conveniently. But that needn't be the case!
</p>
<label class="fileContainer">
Click here to trigger the file uploader!
<input type="file"/>
</label>
@ed1nh0

This comment has been minimized.

Copy link

commented Aug 29, 2013

Even with the overflow:hidden property of the parent element there is a selectable area below it and it's fully clickable. And a vertical scrollbar could appear on browser window. My quick solution is to float the parent element or set it to display:table.

@kirsief

This comment has been minimized.

Copy link

commented Nov 4, 2013

Great, thank you! One question though: How can you let people know the file is selected/uploaded i.e. give feedback?

@jonpond

This comment has been minimized.

Copy link

commented Nov 21, 2013

Good question kirsief. +1 on that question.

@scratchoo

This comment has been minimized.

Copy link

commented Mar 14, 2017

@ed1nh0 I think you should only set bottom:0 to the input file instead of height:100%

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.