Grow your CSS skills. Land your dream job.

Last updated on:

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

Reference URL

Comments

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

  2. 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. 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. Who?
    Permalink to comment#

    What’s the point?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".