Skip to content

Instantly share code, notes, and snippets.

@elky
Last active July 11, 2019 02:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elky/a7533cccd0da5ff5ed9d9fbc202a89bb to your computer and use it in GitHub Desktop.
Save elky/a7533cccd0da5ff5ed9d9fbc202a89bb to your computer and use it in GitHub Desktop.
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