Skip to content

Instantly share code, notes, and snippets.

@softiconic
Last active December 2, 2023 18:45
Show Gist options
  • Save softiconic/d4af0460770f46707f2630bd2e5a548f to your computer and use it in GitHub Desktop.
Save softiconic/d4af0460770f46707f2630bd2e5a548f to your computer and use it in GitHub Desktop.
Customize file upload functionality for input elements.
.upload-btn-wrapper input[type=file] {
position: absolute;
font-size: 14px;
top: 0;
color: #141414;
right: 0;
}
input[type="file"]::-webkit-file-upload-button {
background: transparent;
border: 0;
padding: 1em 2em;
cursor: pointer;
color: #fff;
border-radius: 0.2em;
opacity: 0;
}
input[type="file"]::-ms-browse {
background: transparent;
border: 0;
padding: 1em 2em;
cursor: pointer;
color: #fff;
border-radius: 0.2em;
}
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css("color", "#616161");
} else {
$(this).css("color", "#141414");
}
});
<label for="">Resume</label>
<button class="btn">Attach Resume</button>
<input type="file" required name="resume" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment