Styling an input type file button

Question

How do you style an input type  file  button

User · Answer

Put upload file button over your nice button or element and hide it.

Very simple and will work on any browser

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

Styles

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

User · Answer

Here is a solution which doesn t really style the  lt input type  file    gt  element but instead uses a  lt input type  file    gt  element on top of other elements  which can be styled   The  lt input type  file    gt  element is not really visible hence  the overall illusion is of a nicely styled file upload control   I came across this problem recently and despite the plethora of answers on Stack Overflow  none really seemed to fit the bill  In the end  I ended up customizing this so as to have a simple and an elegant solution   I have also tested this on Firefox  IE  11  10  amp  9   Chrome and Opera  iPad and a few android devices   Here s the JSFiddle link -  http   jsfiddle net umhva747    x000D   x000D     input type file    change function e    x000D       in     this   x000D       in next   html  in val     x000D       x000D      x000D   x000D      uploadButton   click function     x000D      var fileName       fileUpload   val    x000D      if  fileName    x000D          alert fileName     can be uploaded     x000D        x000D      else   x000D          alert  Please select a file to upload    x000D        x000D      x000D  body   x000D      background-color Black  x000D    x000D   x000D  div upload   x000D      background-color  fff  x000D      border  1px solid  ddd  x000D      border-radius 5px  x000D      display inline-block  x000D      height  30px  x000D      padding 3px 40px 3px 3px  x000D      position relative  x000D      width  auto  x000D    x000D   x000D  div upload hover   x000D      opacity 0 95  x000D    x000D   x000D  div upload input type  file     x000D      display  input-block  x000D      width  100   x000D      height  30px  x000D      opacity  0  x000D      cursor pointer  x000D      position absolute  x000D      left 0  x000D    x000D   uploadButton   x000D      background-color   425F9C  x000D      border  none  x000D      border-radius  3px  x000D      color   FFF  x000D      cursor pointer  x000D      display  inline-block  x000D      height  30px  x000D      margin-right 15px  x000D      width  auto  x000D      padding 0 20px  x000D      box-sizing  content-box  x000D    x000D   x000D   fileName   x000D      font-family  Arial  x000D      font-size 14px  x000D    x000D   x000D   upload    uploadButton   x000D      height 38px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt form action    method  post  enctype  multipart form-data  gt  x000D       lt div class  upload  gt  x000D           lt input type  button  class  uploadButton  value  Browse    gt  x000D           lt input type  file  name  upload  accept  image    id  fileUpload    gt  x000D           lt span class  fileName  gt Select file   lt  span gt  x000D       lt  div gt  x000D       lt input type  button  class  uploadButton  value  Upload File    gt  x000D   lt  form gt  x000D   x000D   x000D    Hope this helps

User · Answer

Here is a PURE CSS solution  It is Javascript-free  This one does not attempt to hide then recreate the original control  either  like the other posts here do  It uses plain CSS without any circus tricks to style the original file upload form control for all the major browsers  This is what the file upload control looks like in Firefox  Chrome  and Edge using the CSS below  This is a very simple clean design  You can change it to look any way you like   Internet Explorer gives you limited design control but at least you can manipulate the button using this CSS   input type  quot file quot    input type  quot file quot   visited  input type  quot file quot   hover  input type  quot file quot   focus  input type  quot file quot   active       margin 0      padding  0em 0em      padding  0rem 0rem      overflow  hidden     long file names overflow so just hide the end        background   ffffff      border-radius   2em      border-radius   2rem      outline  none      border  2px solid  bbb      cursor  pointer      -webkit-appearance  textfield      -moz-appearance  textfield     input type  quot file quot   hover       background   f9f9ff     I am using a light blue to indicate an interaction        border  2px solid  999     input type  quot file quot   visited  input type  quot file quot   focus  input type  quot file quot   active       background   fff     Default back to white when focused         border  2px solid  999        Note  Firefox flags the file name box as a  readonly  input  So that attribute selector was added below  Note  These selectors blow up in IE so have to be separated from the same styles above     input type  quot file quot   disabled  input type  quot file quot   read-only       margin  0      padding  0em 0em      padding  0rem 0rem      overflow  hidden     long file names overflow so just hide the end        background   ffffff      border-radius   2em      border-radius   2rem      outline  none      border  2px solid  bbb      cursor  pointer      -webkit-appearance  textfield      -moz-appearance  textfield     input type  quot file quot   disabled hover  input type  quot file quot   read-only hover       background   f9f9ff     I am using a light blue to indicate an interaction        border  2px solid  999     input type  quot file quot   disabled visited  input type  quot file quot   disabled focus  input type  quot file quot   disabled active  input type  quot file quot   read-only visited  input type  quot file quot   read-only focus  input type  quot file quot   read-only active       background   fff     Default back to white when focused         border  2px solid  999        IE UPLOAD BUTTON STYLE  This attempts to alter the file upload button style in IE   Keep in mind IE gives you limited design control but at least you can customize its upload button      -ms-browse      IE        display  inline-block      margin  0      padding   2em  5em      padding   2rem  5rem      text-align  center      outline  none      border  none      background   fff      white-space  nowrap      cursor  pointer       FIREFOX UPLOAD BUTTON STYLE      file-selector-button     firefox        display  inline-block      margin  0rem 1rem 0rem 0rem      padding   18em  5em      padding   18rem  5rem      -webkit-appearance  button      text-align  center      border-radius   1rem 0rem 0rem  1rem      outline  none      border  none      border-right  2px solid  bbb      background   eee      white-space  nowrap      cursor  pointer       CHROME AND EDGE UPLOAD BUTTON STYLE      -webkit-file-upload-button      chrome and edge        display  inline-block      margin  0rem 1rem 0rem 0rem      padding   19em  5em      padding   19rem  5rem      -webkit-appearance  button      text-align  center      border-radius   1rem 0rem 0rem  1rem      outline  none      border  none      border-right  2px solid  bbb      background   eee      white-space  nowrap      cursor  pointer     Note  You might test it in older versions of Firefox  Chrome  Edge  and IE

User · Answer

I found this approach the simplest and lightest   Here is the working example  http   codepen io c3zar22 pen QNoYXN  Below are the explanations    this would be the markup    lt label for  attach-project-file  gt       lt span id  remove-project-file  class  close  gt x lt  span gt       lt div class  filename  id  attached-project-file  gt Click to select a file lt  div gt   lt  label gt   lt input id  attach-project-file  type  file  gt   hide the input in a hacky way like this    attach-project-file       width  0 1px      height  0 1px      opacity  0      overflow  hidden      position  absolute      z-index  -1     style the corresponding label instead   for  attach-project-file            your styles here       style  remove file  button   close       font-size  16px      padding  10px      position  absolute      top  0      right  0      cursor  pointer      font-style  normal      filename element will be used to display the selected file below is the commented JS code needed  using jQuery  to make it work   var  attach       attach-project-file         remove       remove-project-file         name       attached-project-file        initially hide the remove button  remove hide        do this when file input has changed    i e   a file has been selected  attach on  change   function         var val     this  val        if  val                      if value different than empty             show the file name as text            hide text fadeIn creates a nice effect when changing the text          name              hide                text val               fadeIn                show the remove button          remove fadeIn          else              if value empty  means the file has been removed             show the default text          name              hide                text  Click to select a file                fadeIn                hide remove button          remove fadeOut                  remove selected file when clicking the remove button    prevent click bubbling to the parent label and triggering file selection  remove on  click   function e        e preventDefault        e stopPropagation          attach          val              change       trigger change event

User · Answer

follow these steps then you can create custom styles for your file upload form    this is the simple HTML form please read the HTML comments I have written here below    lt form action   type your action here  method  POST  enctype  multipart form-data  gt     lt div id  yourBtn  style  height  50px  width  100px border  1px dashed  BBB  cursor pointer   onclick  getFile    gt Click to upload  lt  div gt     lt  -- this is your file input tag  so i hide it -- gt     lt div style  height  0px width 0px  overflow hidden   gt  lt input id  upfile  type  file  value  upload   gt  lt  div gt     lt  -- here you can have file submit button or you can write a simple script to upload the file automatically-- gt     lt input type  submit  value  submit   gt   lt  form gt   then use this simple script to pass the click event to file input tag   function getFile         document getElementById  upfile   click        Now you can use any type of styling without worrying about how to change default styles    I know this very well because I have been trying to change the default styles for a month and a half  believe me  it s very hard because different browsers have different upload input tag  So use this one to build your custom file upload forms  Here is the full AUTOMATED UPLOAD code    x000D   x000D  function getFile     x000D    document getElementById  upfile   click    x000D    x000D   x000D  function sub obj    x000D    var file   obj value  x000D    var fileName   file split        x000D    document getElementById  yourBtn   innerHTML   fileName fileName length - 1   x000D    document myForm submit    x000D    event preventDefault    x000D    x000D   yourBtn   x000D    position  relative  x000D    top  150px  x000D    font-family  calibri  x000D    width  150px  x000D    padding  10px  x000D    -webkit-border-radius  5px  x000D    -moz-border-radius  5px  x000D    border  1px dashed  BBB  x000D    text-align  center  x000D    background-color   DDD  x000D    cursor  pointer  x000D    x000D   lt form action   type your action here  method  POST  enctype  multipart form-data  name  myForm  gt  x000D     lt div id  yourBtn  onclick  getFile    gt click to upload a file lt  div gt  x000D     lt  -- this is your file input tag  so i hide it -- gt  x000D     lt  -- i used the onchange event to fire the form submission-- gt  x000D     lt div style  height  0px width  0px  overflow hidden   gt  lt input id  upfile  type  file  value  upload  onchange  sub this     gt  lt  div gt  x000D     lt  -- here you can have file submit button or you can write a simple script to upload the file automatically-- gt  x000D     lt  --  lt input type  submit  value  submit   gt  -- gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Don t be fooled by  great  CSS-only solutions that are actually very browser-specific  or that overlay the styled button on top of the real button  or that force you to use a  lt label gt  instead of a  lt button gt   or any other such hack  JavaScript IS necessary to get it working for general usage  Please study how gmail and DropZone do it if you don t believe me   Just style a normal button however you want  then call a simple JS function to create and link a hidden input element to your styled button     lt  DOCTYPE html gt   lt meta charset  utf-8  gt    lt style gt      button           width              160px          height             30px          font-size          13px          border             none          text-align         center          background-color    444          color               6f0            button active           background-color    779         lt  style gt    lt button id  upload  gt Styled upload button  lt  button gt    lt script gt   function Upload On Click id  handler        var hidden input   null      document getElementById id  onclick   function    hidden input click         function setup hidden input             hidden input  amp  amp  hidden input parentNode removeChild hidden input           hidden input   document createElement  input            hidden input setAttribute  type    file            hidden input style visibility    hidden           document querySelector  body   appendChild hidden input           hidden input onchange   function                 handler hidden input files 0                setup hidden input                         setup hidden input       Upload On Click  upload   function file        console log  GOT FILE      file name         lt  script gt    Notice how the above code re-links it after every time the user chooses a file  This is important because  onchange  is only called if the user changes the filename  But you probably want to get the file every time the user provides it

User · Answer

lt label gt       lt input type  file    gt    lt  label gt    You can wrap your input type  file  inside of a label for the input  Style the label however you d like and hide the input with display  none

User · Answer

I am able to do it with pure CSS using below code  I have used bootstrap and font-awesome    x000D   x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome css  rel  stylesheet    gt  x000D   x000D   lt label class  btn btn-default btn-sm center-block btn-file  gt  x000D     lt i class  fa fa-upload fa-2x  aria-hidden  true  gt  lt  i gt  x000D     lt input type  file  style  display  none   gt  x000D   lt  label gt  x000D   x000D   x000D

User · Answer

Plug-in solutions I found were too heavy-weight  so  I made my own jQuery plug-in called Drolex FileStyle   This plug-in allows you to style file input fields however you want  Actually  you style div elements to look like a tricked out file input  and the actual file input is automatically overlaid with 0  opacity  No additional HTML is required  Just include the css and js files in the page you want Drolex FileStyle and that s it  Edit the css file to your liking  Don t forget the jQuery library if your page doesn t already have it  If the client does not run JavaScript  then the file input will not be modified by js or css   Tested to work in Chrome 24  Firefox 18  Internet Explorer 9  Expected to work in previous versions of those and others   Download  http   web drolex net Drolex-FileStyle zip

User · Answer

You don t need JavaScript for this  Here is a cross-browser solution  See this example  - It works in Chrome FF IE -  IE10 9 8 7  The best approach would be to have a custom label element with a for attribute attached to a hidden file input element   The label s for attribute must match the file element s id in order for this to work    lt label for  quot file-upload quot  class  quot custom-file-upload quot  gt      Custom Upload  lt  label gt   lt input id  quot file-upload quot  type  quot file quot   gt   As an alternative  you could also just wrap the file input element with a label directly   example   lt label class  quot custom-file-upload quot  gt       lt input type  quot file quot   gt      Custom Upload  lt  label gt   In terms of styling  just hide1 the input element using the attribute selector  input type  quot file quot         display  none     Then all you need to do is style the custom label element   example    custom-file-upload       border  1px solid  ccc      display  inline-block      padding  6px 12px      cursor  pointer      1 - It s worth noting that if you hide the element using display  none  it won t work in IE8 and below  Also be aware of the fact that jQuery validate doesn t validate hidden fields by default  If either of those things are an issue for you  here are two different methods to hide the input  1  2  that work in these circumstances

User · Answer

A really clever solution using jQuery that works in all older browsers as well as in the new ones  I found here  It takes care of all the styling and click   problems  using the actual file browse button  I made a plain javascript version  fiddle The solution is as simple as genius  make the file-input invisible  and use a piece of code to place it under the mousecursor    lt div class  inp field 12  onmousemove  file ho event this 1   gt  lt span gt browse lt  span gt   lt input id  file 1  name  file 1  type  file  value    onchange  file ch 1   gt   lt  div gt   lt div id  result 1  class  result  gt  lt  div gt    function file ho e  o  a        e   window event    e      var x   0      y   0      if  o offsetParent            do           x    o offsetLeft          y    o offsetTop            while  o   o offsetParent         var x1   e clientX    window event clientX  var y1   e clientY    window event clientY  var le   100 -  x1 - x   var to   10 -  y1 - y   document getElementById  file     a  style marginRight   le    px   document getElementById  file     a  style marginTop   -to    px       inp field 12   position relative  overflow hidden  float  left  width  130px  height  30px  background  orange     inp field 12 span   position  absolute  width  130px  font-family  Calibri    Trebuchet MS   sans-serif  font-size 17px  line-height 27px  text-align center  color  555     inp field 12 input type  file     cursor pointer  cursor hand  position  absolute  top  0px  right  0px  -moz-opacity 0  filter alpha opacity  0   opacity  0  outline  none  outline-style none  outline-width 0  ie-dummy  expression this hideFocus true      inp field 12 hover   background-position -140px -35px     inp field 12 hover span   color  fff

User · Answer

css can do a lot here    with a little trickery      lt div id  wrapper  gt     lt input type  file  id  browse  gt   lt  div gt    wrapper        width  93px    play with this value         height  28px    play with this value         background  url  browseBtn png   0 0 no-repeat       border none       overflow hidden      browse       margin-left -145px    play with this value         opacity 0     set to  5 or something so you can better position it as an overlay then back to zero again after you re done         -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 0         filter  progid DXImageTransform Microsoft Alpha Opacity 0         reference  http   site-o-matic net  viewpost 19  -abbey

User · Answer

Multiple file solution with converted filename Bootstrap EXAMPLE HTML   lt div gt     lt label class  quot btn btn-primary search-file-btn quot  gt       lt input name  quot file1 quot  type  quot file quot  style  quot display None  quot  gt   lt span gt Choose file lt  span gt     lt  label gt     lt span gt No file selected lt  span gt   lt  div gt    lt div gt     lt label class  quot btn btn-primary search-file-btn quot  gt       lt input name  quot file2 quot  type  quot file quot  style  quot display None  quot  gt   lt span gt Choose file lt  span gt     lt  label gt     lt span gt No file selected lt  span gt   lt  div gt   1  JS with jQuery      ready function             search-file-btn   children  quot input quot   bind  change   function         var fileName           fileName     this  val   split  quot    quot   slice -1  0         this  parent   next  quot span quot   html fileName             2  JS without jQuery Array prototype forEach call document getElementsByTagName  input    function item      item addEventListener  quot change quot   function         var fileName           fileName   this value split  quot    quot   slice -1  0       this parentNode nextElementSibling innerHTML   fileName

User · Answer

This is simple with jquery  To give a code example of Ryan s suggestion with a slight modification   Basic html    lt div id  image icon  gt  lt  div gt   lt div id  filename  gt  lt  div gt   lt input id  the real file input  name  foobar  type  file  gt    Be sure to set the styling on the input when you re ready  opacity  0 You can t set display  none because it needs to be clickable  But you can position it under the  new  button or tuck in under something else with z-index if you prefer   Setup some jquery to click the real input when you click the image       image icon   click function             the real file input   click          Now your button is working  Just cut and paste the value when changed      input type file    bind  change   function         var str           str     this  val            filename   text str      change      Tah dah  You may need to parse the val   to something more meaningful but you should be all set

User · Answer

VISIBILITY hidden TRICK I usually go for the visibility hidden trick this is my styled button  lt div id  quot uploadbutton quot  class  quot btn btn-success btn-block quot  gt Upload lt  div gt   this is the input type file button  Note the visibility hidden rule  lt input type  quot file quot  id  quot upload quot  style  quot visibility hidden  quot  gt   this is the JavaScript bit to glue them together  It works  lt script gt       uploadbutton   click function           input type file    click           lt  script gt

User · Answer

All rendering engines automatically generate a button when an  lt input type  file  gt  is created  Historically  that button has been completely un-styleable  However  Trident and WebKit have added hooks through pseudo-elements   Trident  As of IE10  the file input button can be styled using the   -ms-browse pseudo-element  Basically  any CSS rules that you apply to a regular button can be applied to the pseudo-element  For example    x000D   x000D    -ms-browse   x000D    background  black  x000D    color  red  x000D    padding  1em  x000D    x000D   lt input type  file  gt  x000D   x000D   x000D    This displays as follows in IE10 on Windows 8     WebKit  WebKit provides a hook for its file input button with the   -webkit-file-upload-button pseudo-element  Again  pretty much any CSS rule can be applied  therefore the Trident example will work here as well    x000D   x000D    -webkit-file-upload-button   x000D    background  black  x000D    color  red  x000D    padding  1em  x000D    x000D   lt input type  file  gt  x000D   x000D   x000D    This displays as follows in Chrome 26 on OS X

User · Answer

The best way is using the pseudo element  after or  before as an element overt the de input  Then style that pseudo element as you wish  I recomend you to do as a general style for all input files as follows   input     height  0px    outline  none     input type  file   before     content   Browse     background   fff    width  100     height  35px    display  block    text-align  left    position  relative    margin  0    margin  0 5px    left  -6px    border  1px solid  e0e0e0    top  -1px    line-height  35px    color   b6b6b6    padding-left  5px    display  block

User · Answer

the only way i can think of is to find the button with javascript after it gets rendered and assign a style to it  you might also look at this writeup

User · Answer

I ve found a very easy method to switch the file button to a picture  You just label a picture and place it on top of the file button    lt html gt   lt div id  File button  gt       lt div style  position absolute   gt           lt  --This is your labeled image-- gt           lt label for  fileButton  gt  lt img src  ImageURL  gt  lt  label gt       lt  div gt       lt div gt           lt input type  file  id  fileButton   gt       lt  div gt   lt  div gt   lt  html gt    When clicking on the labeled image  you select the file button

User · Answer

x000D   x000D      new Btn   click function           html btn   click        x000D   new Btn        your css propterties     html btn     display  none    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div class  new Btn  gt SelectPicture lt  div gt  lt br gt   lt input id  html btn  type  file      gt  lt br gt  x000D   x000D   x000D   You can reach your goals too without jQuery with normal JavaScript  Now the newBtn is linkes with the html btn and you can style your new btn like you want  D

User · Answer

jquery  version of teshguru script for automatically detect input file  and style     lt html gt   lt head gt   lt script type  text javascript  src  http   code jquery com jquery-1 7 2 min js  gt  lt  script gt   lt style gt   yourBtn     position  relative         top  150px     font-family  calibri     width  150px     padding  10px     -webkit-border-radius  5px     -moz-border-radius  5px     border  1px dashed  BBB      text-align  center     background-color   DDD     cursor pointer       lt  style gt   lt script type  text javascript  gt    document  ready function            input type file    each function                   this  attr  onchange   sub this                 lt div id  yourBtn  onclick  getFile    gt click to upload a file lt  div gt    insertBefore this             this  wrapAll   lt div style  height  0px width  0px  overflow hidden   gt  lt  div gt                  function getFile          input type file    click        function sub obj       var file   obj value      var fileName   file split            document getElementById  yourBtn   innerHTML   fileName fileName length-1       lt  script gt   lt  head gt   lt body gt   lt  php      var dump   FILES     gt   lt center gt   lt form action    method  post  enctype  multipart form-data  name  myForm  gt    lt input id  upfile  name  file  type  file  value  upload   gt   lt input type  submit  value  submit   gt   lt  form gt   lt  center gt   lt  body gt   lt  html gt

User · Answer

ONLY CSS  Use this very simple and EASY   x000D   x000D   choose  -webkit-file-upload-button   x000D    color  white  x000D    display  inline-block  x000D    background   1CB6E0  x000D    border  none  x000D    padding  7px 15px  x000D    font-weight  700  x000D    border-radius  3px  x000D    white-space  nowrap  x000D    cursor  pointer  x000D    font-size  10pt  x000D    x000D   lt label gt Attach your screenshort lt  label gt  x000D   lt input type  file  multiple class  choose  gt  x000D   x000D   x000D

User · Answer

These answers are nice  and they all work for very specific use cases  That is to say  they are opinionated   So  here s an answer that assumes nothing  but will work no matter how you modify it  You can change design with css  add javascript to maybe show a file name on change  etc  it will still always work   Code   Here is the core css   file-input    pointer-events  none    position  relative    overflow  hidden     file-input  gt        pointer-events  none     file-input  gt  input type  file      position  absolute    top  0    right  0    bottom  0    left  0    opacity  0    pointer-events  all    cursor  pointer    height  100     width  100       and the core html    lt div class  file-input  gt     lt input type  file   gt   lt  div gt    As you can see  we are forcing any pointer event click  that happens on the  file-input element  or any of its children  to be proxied to the file input  This is because the file input is positioned absolute and will consume the width height of the container always  You can therefore customize to fit your need  style the wrapper into a button  use some js to display file name on select  etc  nothing will break so long as the above core code remains intact   As you will see in the demo  i have added a span with text  Select file  and a class with extra styles to style the  file-input div  This should be the canonical starting point for anyone intending to create a custom file upload element   Demo JSFIDDLE

User · Answer

A quick and crude way is to set the label as a button and set position to absolute so it floats over original button  you still see file name  I am thinking about a mobile solution however

User · Answer

Styling file inputs are notoriously difficult  as most browsers will not change the appearance from either CSS or javascript   Even the size of the input will not respond to the likes of    lt input type  file  style  width 200px  gt    Instead  you will need to use the size attribute    lt input type  file  size  60    gt    For any styling more sophisticated than that  e g  changing the look of the browse button  you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input  The article already mentioned by rm at www quirksmode org dom inputfile html is the best one I ve seen   UPDATE  Although it s difficult to style an  lt input gt  tag directly  this is easily possible with the help of a  lt label gt  tag  See answer below from  JoshCrozier  https   stackoverflow com a 25825731 10128619

User · Answer

Maybe a lot of awnsers  But I like this in pure CSS with fa-buttons    x000D   x000D   divs   x000D      position  relative  x000D      display  inline-block  x000D      background-color   fcc  x000D    x000D   x000D   inputs   x000D      position absolute  x000D      left  0px  x000D      height  100   x000D      width  100   x000D      opacity  0  x000D      background   00f  x000D      z-index 999  x000D    x000D   x000D   icons   x000D      position relative  x000D    x000D   lt div class  divs  gt  x000D   lt input type  file  id  image  class  inputs  gt  x000D   lt i class  fa fa-image fa-2x icons  gt  lt  i gt  x000D   lt  div gt  x000D   x000D   lt div class  divs  gt  x000D   lt input type  file  id  book  class  inputs  gt  x000D   lt i class  fa fa-book fa-5x icons  gt  lt  i gt  x000D   lt  div gt  x000D   lt br gt  lt br gt  lt br gt  x000D   lt div class  divs  gt  x000D   lt input type  file  id  data  class  inputs  gt  x000D   lt i class  fa fa-id-card fa-3x icons  gt  lt  i gt  x000D   lt  div gt  x000D   x000D   x000D   x000D   x000D   x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   x000D   x000D    Fiddle  https   jsfiddle net zoutepopcorn v2zkbpay 1

User · Answer

Here s a simple css only solution  that creates a consistent target area  and lets you style your faux elements however you like    The basic idea is this    Have two  fake  elements  a text input link  as siblings to your real file input  Absolutely position them so they re exactly on top of your target area  Wrap your file input with a div  Set overflow to hidden  so the file input doesn t spill out   and make it exactly the size that you want your target area to be  Set opacity to 0 on the file input so it s hidden but still clickable  Give it a large font size so the you can click on all portions of the target area    Here s the jsfiddle  http   jsfiddle net gwwar nFLKU    lt form gt       lt input id  faux  type  text  placeholder  Upload a file from your computer    gt       lt a href     id  browse  gt Browse  lt  a gt       lt div id  wrapper  gt           lt input id  input  size  100  type  file    gt       lt  div gt   lt  form gt

User · Answer

As JGuo and CorySimmons mentioned  you can use the clickable behaviour of a stylable label  hiding the less flexible file input element    lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt Custom file input lt  title gt   lt link rel  stylesheet  href  http   netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  gt   lt  head gt    lt body gt    lt label for  upload-file  class  btn btn-info  gt  Choose file     lt  label gt   lt input id  upload-file  type  file  style  display  none  onchange  this nextElementSibling textContent   this previousElementSibling title   this files 0  name  gt   lt div gt  lt  div gt    lt  body gt   lt  html gt

User · Answer

This week I also needed to custom the button and display the selected file name aside it  so after reading some of the answers above  Thanks BTW  I came up with the following implementation   HTML    lt div class  browse  gt   lt label id  uploadBtn  class  custom-file-upload  gt Choose file  lt input type  file  name  fileInput  id  fileInput  accept   yaml  ngf-select ngf-change  onFileSelect  files     gt   lt  label gt   lt span gt   fileName   lt  span gt   lt  div gt    CSS     input type  file         color   a1bbd5      display  none       custom-file-upload       border  1px solid  a1bbd5      display  inline-block      padding  2px 8px      cursor  pointer     label      color   a1bbd5      border-radius  3px      Javascript  Angular   app controller  MainCtrl   function  scope              scope fileName    No file chosen               scope onFileSelect   function   files               scope selectedFile    files             scope fileName    files 0  name               Basically I m working with ng-file-upload lib  Angular-wise I m binding the filename to my  scope and giving it the initial value of  No file chosen   I m also binding the onFileSelect   function to my scope so when a file gets selected I m getting the filename using ng-upload API and assign it to the  scope filename

User · Answer

Hide it with css and use a custom button with   selector  click   to activate the the browse button  then set an interval to check the value of the file input type  the interval can display the value for the user so the user can see whats getting uploaded  the interval will clear when the form is submitted  EDIT  Sorry i have been very busy was meaning to update this post  here is an example   lt form action  uploadScript php  method  post  enctype  multipart form-data  gt   lt div gt       lt  -- filename to display to the user -- gt       lt p id  file-name  class  margin-10 bold-10  gt  lt  p gt        lt  -- Hide this from the users view with css display none  -- gt       lt input class  display-none  id  file-type  type  file  size  4  name  file   gt        lt  -- Style this button with type image or css whatever you wish -- gt       lt input id  browse-click  type  button  class  button  value  Browse for files   gt        lt  -- submit button -- gt       lt input type  submit  class  button  value  Change   gt   lt  div gt        window  load function          var intervalFunc   function                  file-name   html     file-type   val                    browse-click   on  click   function         use  live   for older versions of jQuery             file-type   click            setInterval intervalFunc  1           return false

User · Answer

Here is a solution  that also shows the chosen file name  http   jsfiddle net raft9pg0 1   HTML    lt label for  file-upload  class  custom-file-upload  gt Chose file lt  label gt   lt input id  file-upload  type  file   gt  File   lt span id  file-upload-value  gt - lt  span gt    JS     function            input file id file-upload    change function                 file-upload-value   html    this  val                    CSS   input type  file         display  none      custom-file-upload         background   ddd        border  1px solid  aaa        border-top  1px solid  ccc        border-left  1px solid  ccc        -moz-border-radius  3px        -webkit-border-radius  3px        border-radius  3px        color   444        display  inline-block        font-size  11px        font-weight  bold        text-decoration  none        text-shadow  0 1px rgba 255  255  255   75         cursor  pointer        margin-bottom  20px        line-height  normal        padding  8px 10px

User · Answer

In case you re looking for a javascript library - out of the box solution  jquery-fileinput works fine

User · Answer

If anyone still cares on how to do this without JavaScript  let me complete Josh answer   How to display the text of the filename   The easiest way is to set both elements to a position relative  give the label a higher z-index and give the input file negative margin until the label text is where you want it to be  Do not use display none on the input   Example   input type  file       position relative    z-index 1    margin-left -90px      custom-file-upload     border  1px solid  ccc    display  inline-block    padding  6px 12px    cursor  pointer    position relative    z-index 2    background white

User · Answer

If you are using Bootstrap 3  this worked for me   See http   www abeautifulsite net whipping-file-inputs-into-shape-with-bootstrap-3    x000D   x000D   btn-file   x000D    position  relative  x000D    overflow  hidden  x000D    x000D   btn-file input type file    x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    min-width  100   x000D    min-height  100   x000D    font-size  100px  x000D    text-align  right  x000D    filter  alpha opacity 0   x000D    opacity  0  x000D    outline  none  x000D    background  white  x000D    cursor  inherit  x000D    display  block  x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt span class  btn btn-primary btn-file  gt  x000D      Browse    lt input type  file  gt  x000D   lt  span gt  x000D   x000D   x000D    Which produces the following file input button     Seriously  check out http   www abeautifulsite net whipping-file-inputs-into-shape-with-bootstrap-3

User · Answer

Simply simulate a click on the  lt input gt  by using the trigger   function when clicking on a styled  lt div gt   I created my own button out of a  lt div gt  and then triggered a click on the input when clicking my  lt div gt   This allows you to create your button however you want because it s a  lt div gt  and simulates a click on your file  lt input gt   Then use display  none on your  lt input gt       div styled as my load file button  lt div id  simClick  gt Load from backup lt  div gt    lt input type  file  id  readFile    gt      Click function for input     readFile   click function         readFile            Simulate click on the input when clicking div     simClick   click function             readFile   trigger  click

User · Answer

Here we use a span to trigger input of type file and we simply customized that span  so we can add any styling using this way   Note that we use input tag with visibility hidden option and trigger it in the span    x000D   x000D   attachFileSpan  x000D  color  2b6dad  x000D  cursor pointer  x000D    x000D   attachFileSpan hover  x000D  text-decoration  underline  x000D    x000D   lt h3 gt  Customized input of type file  lt  h3 gt  x000D   lt input id  myInput  type  file  style  visibility hidden   gt  x000D   x000D           lt span title  attach file  class  attachFileSpan  onclick  document getElementById  myInput   click    gt  x000D          Attach file x000D           lt  span gt  x000D   x000D   x000D    Reference

User · Answer

Here s a cross compatible method which will work in Chrome  Firefox  Safari  and IE    x000D   x000D    window  on  resize  function     x000D   var eqw      input type text    width    x000D      textarea   width eqw - 32   x000D       fileoutline   width eqw   x000D     trigger  resize    x000D   x000D      file  file   hide    x000D   x000D      file   click function     x000D      var input     this  next   find  input    x000D      input click    x000D      x000D     input id  file1     change function      x000D       file  file   show    x000D   var filename     this  val    x000D       filename1   html filename   x000D       file   find  span   html  CHANGE FILE    x000D      x000D     input id  file2     change function     x000D   var filename     this  val    x000D       filename2   html filename   x000D       file   find  span   html  CHANGE FILE    x000D      x000D    x000D  form   width 55  margin 0 auto padding-left 3vw text-align left    x000D  fieldset border 0 margin 0 padding 0   x000D  textarea overflow  auto height 25vh resize none outline none width 93  background none padding 8px 15px display block text-align left border 1px solid  000 margin 0 color  000 font 700 0 85em 2 2  Futura Book  Arial sans-serif   x000D  input focus outline none   x000D  input type text  font-weight 700 font-size 0 85em line-height 2 2 background none text-align left letter-spacing 0 02em height 33px display block width 100  border none border-bottom 1px solid  000 margin 0 0 28px color  000   x000D  input focus outline 0   x000D   fileoutline   width 100  margin 25px auto 0px left 0 right 0 height 40px border 1px solid  000 position relative    x000D  input type file    -webkit-appearance  none -moz-appearance none appearance  none opacity 0 position relative width 100  height 35px font-weight 700 font-size 0 5em line-height 28px letter-spacing 0 2em position  absolute left  0 top  0 height  100  z-index 10    x000D   file  filename1  filename2  submit   font-size 10px letter-spacing 0 02em text-transform uppercase color  ffffff text-align center width 35    x000D   file  filename1  filename2   font-weight 200 line-height 28px   x000D   filename1  filename2   width 375px overflow hidden top 0 text-align right position absolute display block height 26px color  000   x000D   file   position absolute width 100px top 6px left 10px background  000 border-radius 14px    x000D    -webkit-file-upload-button   -ms-browse   width  100  height 25px opacity  0 -webkit-appearance  none appearance  none    x000D   submit border none height 32px background   000 box-shadow 0 0 0 0 5px  fff 0 0 0 5px  000 margin 35px 0 float right display block   x000D   lt form action    method  post  enctype  multipart form-data  gt  x000D       lt input type  text  name  email  id  email  placeholder  Email address    gt  x000D       lt input type  text   type  text  name  name  id  title  placeholder  Name    gt  x000D       lt textarea rows  7  cols  40  name  description  id  description  placeholder  Description  gt  lt  textarea gt  x000D       lt div class  fileoutline  gt  lt div class  file  gt  lt span gt CHOOSE FILE lt  span gt  lt input type  file  name  file    id  file1  gt  lt div class  filename1  gt NO CHOSEN FILE lt  div gt  lt  div gt  lt  div gt  x000D       lt div class  fileoutline  gt  lt div class  file  gt  lt span gt CHOOSE FILE lt  span gt  lt input type  file  name  file    id  file2  gt  lt div class  filename2  gt NO CHOSEN FILE lt  div gt  lt  div gt  lt  div gt  x000D       lt input type  submit  name  submit  value  Submit  id  submit  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Update Nevermind  this doesn t work in IE or it s new brother  FF  Works on every other type of element as expected  but doesn t work on file inputs  A much better way to do this is to just create a file input and a label that links to it  Make the file input display none and boom  it works in IE9  seamlessly  Warning  Everything below this is crap  By using pseudo elements positioned sized against their container  we can get by with only one input file  no additional markup needed   and style as per usual  Demo  lt input type  quot file quot  class  quot foo quot  gt    foo       display  block      position  relative      width  300px      margin  auto      cursor  pointer      border  0      height  60px      border-radius  5px      outline  0     foo hover after       background   5978f8     foo after       transition  200ms all ease      border-bottom  3px solid rgba 0 0 0  2       background   3c5ff4      text-shadow  0 2px 0 rgba 0 0 0  2       color   fff      font-size  20px      text-align  center      position  absolute      top  0      left  0      width  100       height  100       display  block      content   Upload Something       line-height  60px      border-radius  5px     Enjoy guys  Old Update Turned this into a Stylus mixin  Should be easy enough for one of you cool SCSS cats to convert it  file-button button width   150px    display block   position relative   margin auto   cursor pointer   border 0   height 0   width 0   outline none    amp  after     position absolute     top 0     text-align center     display block     width button width     left - button width   2   Usage   lt input type  quot file quot  gt   input type  quot file quot       file-button 200px

User · Answer

lt input type  file  name  media  style  display-none  onchange  document media submit    gt    I would normally use simple javascript to customize the file input tag A hidden input field on click of button javascript call the hidden field simple solution with out any css or bunch of jquery    lt button id  file  onclick      file   click    gt Upload File lt  button gt

User · Answer

This is a nice way to do it with material   angular file upload  You could do the same with a bootstrap button   Note I used  lt a gt  instead of  lt button gt  this allows the click events to bubble up    lt label gt       lt input type  file   change   setFile  event   style  display none    gt        lt a mat-raised-button color  primary  gt         lt mat-icon gt file upload lt  mat-icon gt        Upload Document      lt  a gt      lt  label gt

User · Answer

This approach gives you the whole flexibility  ES6   VanillaJS  html   lt input type  quot file quot  style  quot display none  quot  gt  lt  input gt   lt button gt Upload file lt  button gt   javascript  document querySelector  button   addEventListener  click        gt      document querySelector  input type  quot file quot     click         This hides the input-file button  but under the hood clicks it from another normal button  that you can obviously style like any other button  This is the only solution with no downside apart from a useless DOM-node  Thanks to display none   the input-button does not reserve any visible space in the DOM   I don t know anymore to whom to give props for this  But I got that idea from somewhere here on Stackoverflow

User · Answer

Working example here with native Drag and drop support   https   jsfiddle net j40xvkb3   When styling a file input  you shouldn t break any of native interaction  the input provides   The display  none approach breaks the native drag and drop support   To not break anything  you should use the opacity  0 approach for the input  and position it using relative   absolute pattern in a wrapper   Using this technique  you can easily style a click   drop zone for the user  and add custom class in javascript on dragenter event to update styles and give user a feedback to let him see that he can drop a file   HTML      lt label for  test  gt     lt div gt Click or drop something here lt  div gt     lt input type  file  id  test  gt   lt  label gt    CSS    input type  file       position  absolute    left  0    opacity  0    top  0    bottom  0    width  100      div     position  absolute    left  0    top  0    bottom  0    width  100     display  flex    align-items  center    justify-content  center    background   ccc    border  3px dotted  bebebe    border-radius  10px     label     display  inline-block    position  relative    height  100px    width  400px      Here is a working example  with additional JS to handle dragover event and dropped files    https   jsfiddle net j40xvkb3   Hope this helped

User · Answer

The best way I have found is having an input type  file then setting it to display  none  Give it an id  Create a button or any other element you want to open the file input    Then add an event listener on it  button  which when clicked simulates a click on the original file input  Like clicking a button named hello but it opens a file window   Example code     i am using semantic ui   lt button class  ui circular icon button purple send-button  id  send-btn  gt         lt i class  paper plane icon  gt  lt  i gt       lt  button gt     lt input type  file  id  file  class  input-file    gt    javascript  var attachButton document querySelector   attach-button        attachButton addEventListener  click   e  gt               file   trigger  click

[html] Styling an input type="file" button

Put upload file button over your nice button or element and hide it.

Examples related to html

Examples related to css

Examples related to file-io