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;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}
Any reason you have -moz-linear-gradient where the selector is WebKit specific? In this case,
input[type="file"]::-webkit-file-upload-button
.Good point! :)
I just heard your SitePoint podcast this morning and then, voila, here you are helping me get Webkit to conform. Awesome and thank you.
My site is just starting.
I´ve been working at Accenture, great company, but little time for html development. Just starting as a hobby. My friend, is it possible to make a living doing websites like this? or is this only your hobby?
other question, I love this comment design, how are this created! I need one like this comment section =)
Great work!
Thanks
Daniel from Monterrey
What’s the point?
Hi,
The solution provided in the post exactly works in the chrome. Thanks for the great work. But its not supporting to Mozilla.
any solution regarding this?
unfortunately this doesn’t seem to work in anymore :( any new solutions?
It’s working and keeping upload button on right side but the default space of upload button on the right side is coming empty its not aligning No file selected text to right side.
Any idea how can the text be moved to left side.
Hey Anjali! The button can be pushed further to the right by using
position
to control the placement. Here’s an example: https://codepen.io/geoffgraham/pen/mddmMRpHi Geoff,
Thank for your reply.I was looking for to align text to left.Can the text https://codepen.io/geoffgraham/pen/mddmMRp “No file chosen” or file name after selection be aligned in left?