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.

Comments

  1. User Avatar
    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. User Avatar
    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. User Avatar
    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

    • User Avatar
      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/

    • User Avatar
      Jamie Katz

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

    • User Avatar
      Mark
      Permalink to comment#

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

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

    • User Avatar
      Anant Raj

      No

  4. User Avatar
    ricardo
    Permalink to comment#

    It doesn’t work on IE 9 :(

  5. User Avatar
    Henry
    Permalink to comment#

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

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

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

  7. User Avatar
    Rakesh
    Permalink to comment#

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

  8. User Avatar
    shalini

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

  9. User Avatar
    shalini

    I found the answer.

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

    Thank you. It is very easy to use.

    • User Avatar
      Sigma
      Permalink to comment#

      alternative solution:

      <style>
      .custom-file-input {
          width: 50px;
          overflow:hidden;
      }
      </style>
      
  10. User Avatar
    yogish d naik

    not working in ie..

  11. User Avatar
    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. User Avatar
    Timothy
    Permalink to comment#

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

  13. User Avatar
    kajal
    Permalink to comment#

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

  14. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Didik
    Permalink to comment#

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

  19. User Avatar
    Bilal khan
    Permalink to comment#

    This tric is very help full thank you …

  20. User Avatar
    SamHeisenberg
    Permalink to comment#

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

  21. User Avatar
    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

    • User Avatar
      Rory Morris
      Permalink to comment#

      This does work in newer browsers, but don’t forget older versions of IE don’t support pointer-events:none.

      The way I’m doing this is:

      1) Custom styled element at z-index:0
      2) File input absolutely position over the top at z-index:1
      3) File input set to opacity:0 so it isn’t visible

      Demo here: http://jsfiddle.net/wuguf376/

  22. User Avatar
    Ross
    Permalink to comment#

    Or hide it and use a styled “ as the clicker

  23. User Avatar
    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. User Avatar
    Rajni
    Permalink to comment#

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

    Thanks

    • User Avatar
      Chris Coyier
      Permalink to comment#

      See title of snippet.

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

  25. User Avatar
    Lohith
    Permalink to comment#

    Hi,

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

  26. User Avatar
    Mihir
    Permalink to comment#

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

  27. User Avatar
    shashi
    Permalink to comment#

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

  28. User Avatar
    pradeep

    Not Working in Firefox

  29. User Avatar
    Brad Martin
    Permalink to comment#

    I guess not many devs know what WebKit/Blink means. If only I could get a pay raise for knowing that when so many dont…

    • User Avatar
      Rory Morris
      Permalink to comment#

      Or maybe they’re just part of the “do it yourself” gang.

      Any web developer that doesn’t know what WebKit/Blink is – isn’t a web developer :P

  30. User Avatar
    Fernanda
    Permalink to comment#

    Hello , thank you very much . That’s what helped!

  31. User Avatar
    deepak
    Permalink to comment#

    Guys suggest me one thing, how can we also show selected file name after browse button using css and HTML

  32. User Avatar
    Shamal
    Permalink to comment#

    function example() {
    location.href = ‘http://youtube.com’;
    }

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-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag