Grow your CSS skills. Land your dream job.

Last updated on:

Custom File Input Styling in WebKit/Blink

<input type="file" class="custom-file-input">
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::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;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Demo

See the Pen Custom File Inputs in WebKit/Blink by Chris Coyier (@chriscoyier) on CodePen

Fair warning: it doesn't show you the file name selected, but you might be able to tweak it to do that. I find typically these days you're triggering an event after file selection and snagging the data that way anyway.

Reference URL

Comments

  1. Harsha
    Permalink to comment#

    On Click of button, there is a extra margin which is in orange color, can you please tell how do I remove that?

  2. Thanks for sharing. There’re a small error on the code:

    .custom-file-inputhover::before {
          border-color: black;
    }
    

    Must be:

    .custom-file-input:hover::before {
      border-color: black;
    }
    
  3. Julian
    Permalink to comment#

    There is some extra space around it, which bothers in my case of usage. Is there any way to remove it?
    (Check image) http://www.abload.de/img/bildschirmfoto2014-01asxy4.png

    • Pawel Sledzikowski
      Permalink to comment#

      I also notices that there is an extra invisible (but clickable) space after the pseudo :before element.

      In fact, that ‘extra’ space is actually the real input file element.

      I solved this issue just by setting visibility: hidden to main input element and
      setting visibility: visible to pseudo before element (together with absolute positioning it).

      In this case there is no longer invisible white space although your pseudo element is actually running out of a main flow which can or cannot be acceptable for you depending on your situation.

      Fiddle: http://jsfiddle.net/GALPG/

    • Jamie Katz

      Thanks Pawel, this worked well. Firefox doesn’t seem to have this issue: you can make the input whatever width you like.

    • Permalink to comment#

      Hey, with Pawel’s fix, I’ve provided event handling.

      http://jsfiddle.net/GALPG/16/

    • Anant Raj

      No

  4. ricardo
    Permalink to comment#

    It doesn’t work on IE 9 :(

  5. I’m interested to know which browsers this will work in?

    • @henry it should work in Safari and Chrome (as well as any other application that uses their rendering engines). It won’t work in IE since that uses a different rendering engine.

  6. Thanks Chris. Pesky IE always ruins the party! Still a good solution though

  7. Rakesh
    Permalink to comment#

    This “custom file input” is not working in Firefox. Firefox is taking default stylings..

  8. shalini

    Is any way to change the cursor type like (cursor:pointer)?

  9. shalini

    I found the answer.

    .custom-file-input {
    color: transparent; cursor: pointer!important;
    }

    Thank you. It is very easy to use.

  10. yogish d naik

    not working in ie..

  11. Did you make a screenshot of what it’s supposed to look like? On Firefox 30.0 using Ubuntu 14.10, there is just this : http://i.imgur.com/Bwh0oeP.png

  12. Timothy
    Permalink to comment#

    This is showing an unstyled “Browse” in the Firefox I’m using which is the latest today…

  13. kajal
    Permalink to comment#

    Styling the input type file this way was very easy as only css was used. It solved my query.

  14. Kunal
    Permalink to comment#

    How can we display the name of file and its type we selected … i.e. if i select a image file with name as xyz then it should display as xyz.jpg

  15. José Barros
    Permalink to comment#

    Hi, thank you for the code. I have one problem though. Since my website will be in different languages, i cant use the css content property, because the text will be in different languages. Any alternative? Thank you!

  16. I’ve created something which is a little more helpful for such a case, a jQuery plugin that gives you the ability to stylise everything about your input file, and also controlling it via a few callbacks :). I hope this may help someone.

    Here is the source on github : Simple Input File

  17. Adriana Cajina
    Permalink to comment#

    How can I invert the order of the elements?. I mean How can I set the button to the left and the file path text to the right?

  18. Didik
    Permalink to comment#

    File name is not showed. Can we add an indicator when a file is selected?

  19. Bilal khan
    Permalink to comment#

    This tric is very help full thank you …

  20. SamHeisenberg
    Permalink to comment#

    Kid, input tags can not take pseudo elements like img tag

  21. TonyWilk
    Permalink to comment#

    On browsers this doesn’t work on…. you can overlay the actual button:

    Read a file...

    The essentials are:
    1. the input element and the overlay <div> must have position: (for z-order to work)
    2. the overlay must have a higher z-order
    3. the overlay must have pointer-events:none

    Yours,
    TonyWilk

  22. Permalink to comment#

    Or hide it and use a styled “ as the clicker

  23. pinoromano
    Permalink to comment#

    Very cool trick!
    it’s easier than the widely mentioned method explained at Quirksmode.org
    However it doesn’t seem to work with Firefox, which is showing the default button with the “Browse” label depending on the installation language of the browser and a caption saying “No file selected” as long as no file is selected (if one selects a file, it’s replaced by the file name).
    Would it be possible at least to hide this caption? In order to show only the default browser button?
    Thank you in advance for your kind help (I’m not a CSS expert).

  24. Rajni
    Permalink to comment#

    Is this not browser friendly???
    I m facing problem while running in firefox.

    Thanks

  25. Lohith
    Permalink to comment#

    Hi,

    This works really good with Chrome. Any solution for Mozilla browser?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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