Skip to content

Instantly share code, notes, and snippets.

@elky elky/input_file.css
Last active Jul 11, 2019

Embed
What would you like to do?
Stylized input file. With file path. No extra divs. Single line JS
/*
Demo: https://jsfiddle.net/elky/ecvy78tu/
Works in webkit browsers only.
<input type="file" data-file="No file chosen" onchange="this.dataset.file=this.files[0].name" multiple>
*/
input[type="file"] {
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 16px;
padding-right: 16px;
border-radius: 5px;
width: 60%; /* Whatever you want */
background: #ebeffc;
}
input[type="file"]::-webkit-file-upload-button {
display: none;
}
input[type="file"]::before,
input[type="file"]::after {
padding: 0 16px;
}
input[type="file"]::before {
content: 'Choose Files';
display: inline-block;
line-height: 48px;
background: #335eea;
color: #fff;
}
input[type="file"]::after {
content: attr(data-file);
background: #ebeffc;
color: #335eea;
}
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.