Force File Upload Input Button To Right Side In WebKit

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%);
}

Comments

  1. User Avatar
    Sunny Singh
    Permalink to comment#

    Any reason you have -moz-linear-gradient where the selector is WebKit specific? In this case, input[type="file"]::-webkit-file-upload-button.

  2. User Avatar
    Kim Casault
    Permalink to comment#

    I just heard your SitePoint podcast this morning and then, voila, here you are helping me get Webkit to conform. Awesome and thank you.

  3. User Avatar
    Daniel
    Permalink to comment#

    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

  4. User Avatar
    Who?
    Permalink to comment#

    What’s the point?

  5. User Avatar
    Lohith
    Permalink to comment#

    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?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag