Treehouse: 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. JuanMa Ruiz
    Permalink to comment#

    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.

    • Mark
      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. Henry
    Permalink to comment#

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

    • Chris
      Permalink to comment#

      @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. Henry
    Permalink to comment#

    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. Zenobius
    Permalink to comment#

    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. SAID ASSEMLAL
    Permalink to comment#

    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. Ross
    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

    • Chris Coyier
      Permalink to comment#

      See title of snippet.

      (I’m just having fun at this point :))

  25. Lohith
    Permalink to comment#

    Hi,

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

  26. Mihir
    Permalink to comment#

    What for mozilla : moz ? and for IE and Opera ?

  27. shashi
    Permalink to comment#

    Not working in firefox….
    .custom-file-input:before not working… any suggestion

  28. pradeep

    Not Working in Firefox

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```