Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save danieldroit/8ee400956ccf9c65278096a483a5dc0f to your computer and use it in GitHub Desktop.
Save danieldroit/8ee400956ccf9c65278096a483a5dc0f to your computer and use it in GitHub Desktop.
CSS: Webkit File Upload Button to the Right
/*
Firefox and IE have the "choose file" button to the right of the
filepath, while Webkit puts it on the left. This makes WebKit put
it on the right as well.
*/
<input type="file">
input[type="file"]{
-webkit-appearance: none;
-webkit-rtl-ordering: left;
text-align: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
border: 1px solid #aaaaaa;
border-radius: 4px;
float: right;
margin: 0 0 0 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment