Last active
January 3, 2016 02:39
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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