Skip to content

Instantly share code, notes, and snippets.

@JuanMaRuiz
Last active January 3, 2016 02:39
Show Gist options
  • Save JuanMaRuiz/8396772 to your computer and use it in GitHub Desktop.
Save JuanMaRuiz/8396772 to your computer and use it in GitHub Desktop.
Without Javascript or jQuery it's possible customize the style for <input type="file" />. It's only available in -webkit. For more information and examples checkout: http://kcy.me/xfjd // http://kcy.me/xfje
.myClass::-webkit-file-upload-button {
visibility: hidden;
}
.myClass::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.myClasshover::before {
border-color: black;
}
.myClass:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment