How to customize input type file

Question

Is it possible to change the appearance of  lt input type  file  gt

User · Answer

You can style them  but you can t remove the elements that are already there  If you re creative  you can work with that and do something like this   input type file        -webkit-appearance  none      -moz-appearance  none      appearance  none      background   EEE      background  linear-gradient to top   FFF   DDD       border  thin solid rgba 0 0 0   5       border-radius   25em      box-shadow  inset  25em  25em  25em rgba 255 255 255   5   inset - 1em - 1em  1em rgba 0 0 0  0 1       cursor  text      padding   25em      http   jsfiddle net zr1x1m2b 1   I suggest you play around with this code  remove lines  add your own  do whatever until you get something that looks how you like

User · Answer

It s much better if you just use a  lt label gt   hide the  lt input gt   and customize the label   HTML    lt input type  file  id  input  gt   lt label for  input  id  label  gt Choose File lt  label gt    CSS    input input      display  none    label label         Customize your label here

User · Answer

lt label for  fusk  gt dsfdsfsd lt  label gt     lt input id  fusk  type  file  name  photo  style  display  none   gt    why not       See the example here

User · Answer

If you re using bootstrap here is a better solution    lt label class  quot btn btn-default btn-file quot  gt      Browse  lt input type  quot file quot  style  quot display  none  quot  required gt   lt  label gt   For IE8 and below http   www abeautifulsite net whipping-file-inputs-into-shape-with-bootstrap-3  Source   https   stackoverflow com a 18164555 625952

User · Answer

You can   t modify much about the input type file  control itself   Since clicking a label element correctly paired with an input will activate focus it  we can use a label to trigger the OS browse dialog    Here is how you can do it      x000D   x000D  label   x000D     cursor  pointer  x000D        Style as you please  it will become the visible UI component     x000D    x000D   x000D   upload-photo   x000D     opacity  0  x000D     position  absolute  x000D     z-index  -1  x000D    x000D   lt label for  upload-photo  gt Browse    lt  label gt  x000D   lt input type  file  name  photo  id  upload-photo    gt  x000D   x000D   x000D    The CSS for the form control will make it appear invisible and not take up space in the document layout  but will still exist so it can be activated via the label   If you want to display the user   s chosen path after selection  you can listen for the change event with JavaScript and then read the path that the browser makes available to you  for security reasons it can lie to you about the exact path   A way to make it pretty for the end user is to simply use the base name of the path that is returned  so the user simply sees the chosen filename    There is a great guide by Tympanus for styling this

User · Answer

Easiest way     lt label gt       Upload      lt input type  file  style  visibility  hidden    gt   lt  label gt

User · Answer

In webkit you can try this out     input type  file    -webkit-file-upload-button        style goes here

User · Answer

Here is a quick pure CSS workaround  works on chrome and has a FireFox fallback included   including the file name a label and an custom upload button  does what it should - no need of JavaScript at all     Note    This works on Chrome and has a FireFox fallback - anyways  I would not use it on a real world website - if browser compatibility is a thing to you  what it should be   So it s more kind of experimental    x000D   x000D   fileUploadInput   x000D    display  grid  x000D    grid-gap  10px  x000D    position  relative  x000D    z-index  1    x000D     x000D     fileUploadInput label   x000D      display  flex  x000D      align-items  center  x000D      color  setColor primary  0 5   x000D      background  setColor white   x000D      transition   4s ease  x000D      font-family  arial  sans-serif  x000D      font-size   75em  x000D      font-weight  regular    x000D       x000D     fileUploadInput input   x000D      position  relative  x000D      z-index  1  x000D      padding  0 gap m   x000D      width  100   x000D      height  50px  x000D      border  1px solid  323262  x000D      border-radius  3px  x000D      font-family  arial  sans-serif  x000D      font-size  1rem  x000D      font-weight  regular    x000D       fileUploadInput input type  file     x000D        padding  0 gap m     x000D         fileUploadInput input type  file    -webkit-file-upload-button   x000D          visibility  hidden  x000D          margin-left  10px  x000D          padding  0  x000D          height  50px  x000D          width  0    x000D           x000D     fileUploadInput button   x000D      position  absolute  x000D      right  0  x000D      bottom  0  x000D      width  50px  x000D      height  50px  x000D      line-height  0  x000D      user-select  none  x000D      color  white  x000D      background-color   323262  x000D      border-radius  0 3px 3px 0  x000D      font-family  arial  sans-serif  x000D      font-size  1rem  x000D      font-weight  800    x000D       fileUploadInput button svg   x000D        width  auto  x000D        height  50     x000D   x000D      x000D    margin  0px  x000D    padding  0px  x000D    box-sizing  border-box  x000D    border  0px  x000D    outline  0  x000D    background-repeat  no-repeat  x000D    appearance  none  x000D    border-radius  0  x000D    vertical-align  middle  x000D    font-weight  inherit  x000D    font-style  inherit  x000D    font-family  inherit  x000D    text-decoration  none  x000D    list-style  none  x000D    user-select  text  x000D    line-height  1 333em    x000D   x000D  body   x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    width  100   x000D    height  100vh  x000D    background  rgba 66  50  98  0 05     x000D   x000D   container   x000D    padding  25px  x000D    box-shadow  0 0 20px rgba 66  50  98  0 35   x000D    border  1px solid  eaeaea  x000D    border-radius  3px  x000D    background  white    x000D   x000D   -moz-document url-prefix     x000D   fileUploadInput button  x000D      display  none x000D    x000D    x000D   lt  -- Author  Ali Soueidan-- gt  x000D   lt  -- Author URI  https    www alisoueidan com-- gt  x000D   x000D   lt div class  container  gt  x000D       lt div class  fileUploadInput  gt  x000D       lt label gt   Upload File lt  label gt  x000D       lt input type  file    gt  x000D       lt button gt   lt  button gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is one way which I like because it makes the input fill out the whole container  The trick is the  font-size  100px   and it need to go with the  overflow  hidden  and the relative position    lt div id  upload-file-container   gt      lt input type  file    gt   lt  div gt    upload-file-container      width  200px     height  50px     position  relative     border  dashed 1px black     overflow  hidden      upload-file-container input type  file        margin  0     opacity  0        font-size  100px

User · Answer

to show path of selected file you can try this  on html      lt div class  fileinputs  gt       lt input type  file  class  file  gt   lt  div gt    and in javascript            var fakeFileUpload   document createElement  div            fakeFileUpload className    fakefile           var image   document createElement  div            image className  fakebtn           image innerHTML    browse           fakeFileUpload appendChild image           fakeFileUpload appendChild document createElement  input             var x   document getElementsByTagName  input            for  var i 0 i lt x length i                  if  x i  type     file   continue              if  x i  parentNode className     fileinputs   continue              x i  className    file hidden               var clone   fakeFileUpload cloneNode true               x i  parentNode appendChild clone               x i  relatedElement   clone getElementsByTagName  input   0               x i  onchange   x i  onmouseout   function                      this relatedElement value   this value                            and style     div fileinputs       position  relative      height  30px      width  370px    input file hidden       position  relative      text-align  right      -moz-opacity  0      filter  alpha opacity  0       opacity  0      z-index  2    div fakefile       position  absolute      top  0px      left  0px      right  0      width  370px      padding  0      margin  0      z-index  1      line-height  90     div fakefile input       margin-bottom  5px      margin-left  0      border  none      box-shadow  0px 0px 2px 1px  ccc      padding  4px      width  241px      height  20px    div fakefile  fakebtn      width  150px      background   eb5a41      z-index  10      font-family  roya-bold      border  none      padding  5px 15px      font-size  18px      text-align  center      cursor  pointer      -webkit-transition  all 0 4s ease      -moz-transition  all 0 4s ease      -o-transition  all 0 4s ease      -ms-transition  all 0 4s ease      transition  all 0 4s ease      display  inline      margin-left  3px    div fileinputs input type  file   hover   div  fakebtn      background   DA472E     div fileinputs input type  file         opacity  0      position  absolute      top  -6px      right  0px      z-index  20      width  102px      height  40px      cursor  pointer

User · Answer

first of all it s a container    lt div class  upload file container  gt      Select file       lt input type  file  name  photo    gt   lt  div gt    The second  it s a CSS style  if you want to real more customization  just keeping your eyes is open      upload file container     width 100px     height 40px     position relative     background your img       upload file container input     width 100px     height 40px     position absolute     left 0     top 0     cursor pointer      This example hasn t style for text inside the button  it depends on font-size  just correct the height and padding-top values for container

User · Answer

I went for this option which clarifies how to fully customize the browse button by including an handler of the uploaded file name  also customized  It adds additional fields and client-side controls on them just to show how to include the browse in a  real  form  not just a standalone   Here s the codepen  http   codepen io emiemi pen zxNXWR  JS     click on our custom btn triggers a click on the hidden actual file input      btnup   click function           fileup   click                changes on the three fields  input  tit and name  trigger a control which checks if the 3 fields are all filled and if file field is valid  an image is uploaded      fileup   change function        var formDOMObj   document upload    here we assign tu our text field  fileup the name of the selected file       var res     fileup   val        var arr   res split          if file is not valid we show the error icon and the red alert     if  formDOMObj fileup value indexOf   jpg      -1  amp  amp  formDOMObj fileup value indexOf   png      -1  amp  amp   formDOMObj fileup value indexOf   jpeg      -1  amp  amp  formDOMObj fileup value indexOf   bmp      -1  amp  amp  formDOMObj fileup value indexOf   JPG      -1  amp  amp  formDOMObj fileup value indexOf   PNG      -1  amp  amp   formDOMObj fileup value indexOf   JPEG      -1  amp  amp  formDOMObj fileup value indexOf   BMP      -1                imgupload    hide  slow                  imguploadok    hide  slow                    imguploadstop    show  slow                nomefile   css   color   red   font-weight  700                nomefile   html  The file   arr slice -1  0    is not an image                  bottone    hide                 fakebtn    show         else     if file is valid we show the green alert          imgupload    hide  slow             imguploadstop    hide  slow             imguploadok    show  slow            nomefile   html arr slice -1  0            nomefile   css   color   green   font-weight  700        if  formDOMObj nome value     amp  amp formDOMObj tit value     amp  amp formDOMObj fileup value           if all three fields are valid the fake input btn is hidden and the actual one i s finally hown              fakebtn    hide                 bottone    show                          nome   change function      same as file change but on name field     var formDOMObj   document upload      if  formDOMObj nome value     amp  amp formDOMObj tit value     amp  amp formDOMObj fileup value                    fakebtn    hide                 bottone    show         else               bottone    hide                 fakebtn    show                  tit   change function       same as file change but on tit field     var formDOMObj   document upload      if  formDOMObj nome value     amp  amp formDOMObj tit value     amp  amp formDOMObj fileup value                    fakebtn    hide                 bottone    show         else               bottone    hide                 fakebtn    show                HTML    lt form name  upload  method  post  action     enctype  multipart form-data  accept-charset  utf-8  gt   lt div class  row  gt     lt div class  col-md-6 center  gt   lt  --this is the actual file input  s hidden beacause we wanna use our custom one-- gt       lt input type  file  value    class  hidden  name  fileup  id  fileup  gt       lt div class  btn-container  gt   lt  --the three icons  default  ok file  img   error file  not an img -- gt         lt h1 class  imgupload  gt  lt i class  fa fa-file-image-o  gt  lt  i gt  lt  h1 gt         lt h1 class  imguploadok  gt  lt i class  fa fa-check  gt  lt  i gt  lt  h1 gt         lt h1 class  imguploadstop  gt  lt i class  fa fa-times  gt  lt  i gt  lt  h1 gt   lt  --this field changes dinamically displaying the filename we are trying to upload-- gt         lt p id  nomefile  gt Only pics allowed   jpg jpeg bmp png  lt  p gt   lt  --our custom btn which triggers the actual hidden one-- gt         lt button type  button  id  btnup  class  btn btn-primary btn-lg  gt Browse for your pic  lt  button gt       lt  div gt     lt  div gt   lt  --additional fields-- gt     lt div class  col-md-6  gt       lt div class  row  gt         lt div class  form-group  id  top  gt           lt div class  col-md-12  gt             lt input type  text  maxlength  100  class  form-control  name  nome  id  nome  placeholder  Your Name  gt           lt  div gt         lt  div gt       lt  div gt       lt div class  row  gt         lt div class  form-group  gt           lt div class  col-md-12  gt             lt input type  text  maxlength  50  class  form-control  name  tit  id  tit  placeholder  I am rubber  you are glue  gt           lt  div gt         lt  div gt       lt  div gt        lt div class  row  gt         lt div class  col-md-8  gt           lt p class  white  gt All fields are mandatory lt  p gt         lt  div gt         lt div class  col-md-4  gt   lt  --the defauld disabled btn and the actual one shown only if the three fields are valid-- gt           lt input type  submit  value  Submit   class  btn btn-primary  id  bottone  style  padding-left 50px  padding-right 50px  display none   gt           lt button type  button  class  btn btn-default  disabled  disabled  id  fakebtn   style  padding-left 40px  padding-right 40px   gt Submit   lt i class  fa fa-minus-circle  gt  lt  i gt  lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

Something like that maybe    lt form gt     lt input id  fileinput  type  file  style  display none    gt   lt  form gt   lt button id  falseinput  gt El Cucaratcha  for example lt  button gt   lt span id  selected filename  gt No file selected lt  span gt    lt script gt    document  ready  function           falseinput   click function            fileinput   click                  fileinput   change function           selected filename   text     fileinput   0  files 0  name         lt  script gt

User · Answer

Here is one way I recently discovered  with a bit of jQuery  HTML Code    lt form action    gt       lt input type  file  name  file upload  style  display none  id  myFile  gt        lt a onclick  fileUpload    gt  Upload a file  lt  a gt   lt  form gt    For the javascript jQuery part     lt script gt  function fileUpload             myFile   click       lt  script gt    In this example  I have put an  anchor  tag to trigger the file upload  You can replace with anything you want  just remember to put the  onclick  attribute with the proper function   Hope this helps   P S    Do not forget to include jQuery from CDN or any other source

User · Answer

x000D   x000D     document  ready function      x000D            document  mousemove function      x000D              myList   css  display    block    x000D              seebtn   css  display    none    x000D              hidebtn   css  display    none    x000D              displayFileNames   html      x000D              myList   html      x000D          var fileArray1   document getElementsByClassName  file-input    x000D          for  var i   0  i  lt  fileArray1 length  i      x000D              var files   fileArray1 i  files  x000D              for  var j   0  j  lt  files length  j      x000D                      myList   append   lt li style  color black  gt     files j  name     lt  li gt     x000D                x000D             x000D   x000D          if       myList   html             x000D                  unselect   css  display    block    x000D                  divforfile   css  color    green    x000D                  attach   css  color    green    x000D                  displayFileNames   html     myList   children   length          files selezionato    x000D   x000D             x000D   x000D          if       myList   html             x000D                  divforfile   css  color    black    x000D                  attach   css  color    black    x000D                  displayFileNames   append  Nessun File Selezionato    x000D             x000D          x000D   x000D        x000D   x000D    function choosefiles obj    x000D            obj  hide    x000D              myList   css  display    none    x000D              hidebtn   css  display    none    x000D              seebtn   css  display    none    x000D              unselect   css  display    none    x000D              upload-form   append   lt input class  file-input inputs  type  file  onclick  choosefiles this   name  file    multiple  multiple    gt     x000D              displayFileNames   html      x000D        x000D   x000D      document  ready function      x000D              unselect   click function      x000D                  hidebtn   css  display    none    x000D                  seebtn   css  display    none    x000D                  displayFileNames   html      x000D                  myList   html      x000D                  myFileInput   val      x000D              document getElementById  upload-form   reset             x000D                  unselect   css  display    none    x000D                  divforfile   css  color    black    x000D                  attach   css  color    black    x000D   x000D              x000D          x000D   lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt  x000D   x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt  x000D   lt style gt  x000D     divs   x000D          position  absolute  x000D          display  inline-block  x000D          background-color   fff  x000D        x000D   x000D       inputs   x000D          position  absolute  x000D          left  0px  x000D          height  2   x000D          width  15   x000D          opacity  0  x000D          background   00f  x000D          z-index  100  x000D        x000D   x000D       icons   x000D          position  absolute  x000D        x000D   x000D    lt  style gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D               lt div gt  x000D                   lt form id  upload-form  action    method  post  enctype  multipart form-data  gt  x000D                      x000D                       lt div class  divs  id  divforfile  style  color black  gt  x000D                           lt input id  myFileInput  class  file-input inputs  type  file  name  file    onclick  choosefiles this   multiple  multiple    gt  x000D                           lt i class  material-icons  id  attach  style  font-size 21px color black  gt attach file lt  i gt  lt label gt Allegati lt  label gt  x000D                       lt  div gt  x000D                   lt  form gt  x000D                   lt br   gt  x000D               lt  div gt  x000D               lt br   gt    x000D               lt div gt  x000D                   lt button style  border none  background-color white  color black  display none  id  seebtn  gt  lt p gt Files  amp  9660  lt  p gt  lt  button gt  x000D                   lt button style  border none  background-color white  color black  display none  id  hidebtn  gt  lt p gt Files  amp  9650  lt  p gt  lt  button gt  x000D                   lt button type  button  class  close  aria-label  Close  id  unselect  style  display none float left  gt  x000D                       lt span style  color red  gt  amp times  lt  span gt  x000D                   lt  button gt  x000D                   lt div id  displayFileNames  gt  x000D                   lt  div gt  x000D                   lt ul id  myList  gt  lt  ul gt  x000D               lt  div gt  x000D   x000D   x000D    This is my fully functional customerized file upload Attachment using jquery  amp  javascript  Visual studio   This will be useful    Code will be available at the comment section    Link   https   youtu be It38OzMAeig  Enjoy       x000D   x000D     document  ready function      x000D            document  mousemove function      x000D              myList   css  display    block    x000D              seebtn   css  display    none    x000D              hidebtn   css  display    none    x000D              displayFileNames   html      x000D              myList   html      x000D          var fileArray1   document getElementsByClassName  file-input    x000D          for  var i   0  i  lt  fileArray1 length  i      x000D              var files   fileArray1 i  files  x000D              for  var j   0  j  lt  files length  j      x000D                      myList   append   lt li style  color black  gt     files j  name     lt  li gt     x000D                x000D             x000D   x000D          if       myList   html             x000D                  unselect   css  display    block    x000D                  divforfile   css  color    green    x000D                  attach   css  color    green    x000D                  displayFileNames   html     myList   children   length          files selezionato    x000D   x000D             x000D   x000D          if       myList   html             x000D                  divforfile   css  color    black    x000D                  attach   css  color    black    x000D                  displayFileNames   append  Nessun File Selezionato    x000D             x000D          x000D   x000D        x000D   x000D    function choosefiles obj    x000D            obj  hide    x000D              myList   css  display    none    x000D              hidebtn   css  display    none    x000D              seebtn   css  display    none    x000D              unselect   css  display    none    x000D              upload-form   append   lt input class  file-input inputs  type  file  onclick  choosefiles this   name  file    multiple  multiple    gt     x000D              displayFileNames   html      x000D        x000D   x000D      document  ready function      x000D              unselect   click function      x000D                  hidebtn   css  display    none    x000D                  seebtn   css  display    none    x000D                  displayFileNames   html      x000D                  myList   html      x000D                  myFileInput   val      x000D              document getElementById  upload-form   reset             x000D                  unselect   css  display    none    x000D                  divforfile   css  color    black    x000D                  attach   css  color    black    x000D   x000D              x000D          x000D   lt style gt  x000D     divs   x000D          position  absolute  x000D          display  inline-block  x000D          background-color   fff  x000D        x000D   x000D       inputs   x000D          position  absolute  x000D          left  0px  x000D          height  2   x000D          width  15   x000D          opacity  0  x000D          background   00f  x000D          z-index  100  x000D        x000D   x000D       icons   x000D          position  absolute  x000D        x000D   x000D    lt  style gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt  x000D      lt div gt  x000D                   lt form id  upload-form  action    method  post  enctype  multipart form-data  gt  x000D                      x000D                       lt div class  divs  id  divforfile  style  color black  gt  x000D                           lt input id  myFileInput  class  file-input inputs  type  file  name  file    onclick  choosefiles this   multiple  multiple    gt  x000D                           lt i class  material-icons  id  attach  style  font-size 21px color black  gt attach file lt  i gt  lt label gt Allegati lt  label gt  x000D                       lt  div gt  x000D                   lt  form gt  x000D                   lt br   gt  x000D               lt  div gt  x000D               lt br   gt    x000D               lt div gt  x000D                   lt button style  border none  background-color white  color black  display none  id  seebtn  gt  lt p gt Files  amp  9660  lt  p gt  lt  button gt  x000D                   lt button style  border none  background-color white  color black  display none  id  hidebtn  gt  lt p gt Files  amp  9650  lt  p gt  lt  button gt  x000D                   lt button type  button  class  close  aria-label  Close  id  unselect  style  display none float left  gt  x000D                       lt span style  color red  gt  amp times  lt  span gt  x000D                   lt  button gt  x000D                   lt div id  displayFileNames  gt  x000D                   lt  div gt  x000D                   lt ul id  myList  gt  lt  ul gt  x000D               lt  div gt  x000D   x000D   x000D     x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D     document  ready function      x000D            document  mousemove function      x000D              myList   css  display    block    x000D              seebtn   css  display    none    x000D              hidebtn   css  display    none    x000D              displayFileNames   html      x000D              myList   html      x000D          var fileArray1   document getElementsByClassName  file-input    x000D          for  var i   0  i  lt  fileArray1 length  i      x000D              var files   fileArray1 i  files  x000D              for  var j   0  j  lt  files length  j      x000D                      myList   append   lt li style  color black  gt     files j  name     lt  li gt     x000D                x000D             x000D   x000D          if       myList   html             x000D                  unselect   css  display    block    x000D                  divforfile   css  color    green    x000D                  attach   css  color    green    x000D                  displayFileNames   html     myList   children   length          files selezionato    x000D   x000D             x000D   x000D          if       myList   html             x000D                  divforfile   css  color    black    x000D                  attach   css  color    black    x000D                  displayFileNames   append  Nessun File Selezionato    x000D             x000D          x000D   x000D        x000D   x000D    function choosefiles obj    x000D            obj  hide    x000D              myList   css  display    none    x000D              hidebtn   css  display    none    x000D              seebtn   css  display    none    x000D              unselect   css  display    none    x000D              upload-form   append   lt input class  file-input inputs  type  file  onclick  choosefiles this   name  file    multiple  multiple    gt     x000D              displayFileNames   html      x000D        x000D   x000D      document  ready function      x000D              unselect   click function      x000D                  hidebtn   css  display    none    x000D                  seebtn   css  display    none    x000D                  displayFileNames   html      x000D                  myList   html      x000D                  myFileInput   val      x000D              document getElementById  upload-form   reset             x000D                  unselect   css  display    none    x000D                  divforfile   css  color    black    x000D                  attach   css  color    black    x000D   x000D              x000D          x000D   lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt  x000D   lt style gt  x000D     divs   x000D          position  absolute  x000D          display  inline-block  x000D          background-color   fff  x000D        x000D   x000D       inputs   x000D          position  absolute  x000D          left  0px  x000D          height  2   x000D          width  15   x000D          opacity  0  x000D          background   00f  x000D          z-index  100  x000D        x000D   x000D       icons   x000D          position  absolute  x000D        x000D   x000D    lt  style gt  x000D    lt div gt  x000D                   lt form id  upload-form  action    method  post  enctype  multipart form-data  gt  x000D                      x000D                       lt div class  divs  id  divforfile  style  color black  gt  x000D                           lt input id  myFileInput  class  file-input inputs  type  file  name  file    onclick  choosefiles this   multiple  multiple    gt  x000D                           lt i class  material-icons  id  attach  style  font-size 21px color black  gt attach file lt  i gt  lt label gt Allegati lt  label gt  x000D                       lt  div gt  x000D                   lt  form gt  x000D                   lt br   gt  x000D               lt  div gt  x000D               lt br   gt    x000D               lt div gt  x000D                   lt button style  border none  background-color white  color black  display none  id  seebtn  gt  lt p gt Files  amp  9660  lt  p gt  lt  button gt  x000D                   lt button style  border none  background-color white  color black  display none  id  hidebtn  gt  lt p gt Files  amp  9650  lt  p gt  lt  button gt  x000D                   lt button type  button  class  close  aria-label  Close  id  unselect  style  display none float left  gt  x000D                       lt span style  color red  gt  amp times  lt  span gt  x000D                   lt  button gt  x000D                   lt div id  displayFileNames  gt  x000D                   lt  div gt  x000D                   lt ul id  myList  gt  lt  ul gt  x000D               lt  div gt  x000D   x000D   x000D

User · Answer

Bootstrap example   lt label className  btn btn-info btn-lg  gt    Upload    lt input type  file  style  display  none    gt   lt  label gt

User · Answer

The trick is hide the input and customize the label     HTML    lt div class  inputfile-box  gt     lt input type  file  id  file  class  inputfile  onchange  uploadFile this   gt     lt label for  file  gt       lt span id  file-name  class  file-box  gt  lt  span gt       lt span class  file-button  gt         lt i class  fa fa-upload  aria-hidden  true  gt  lt  i gt        Select File      lt  span gt     lt  label gt   lt  div gt    CSS    inputfile-box     position  relative      inputfile     display  none      container     display  inline-block    width  100       file-box     display  inline-block    width  100     border  1px solid    padding  5px 0px 5px 5px    box-sizing  border-box    height  calc 2rem - 2px       file-button     background  red    padding  5px    position  absolute    border  1px solid    top  0px    right  0px      JS   function uploadFile target        document getElementById  file-name   innerHTML   target files 0  name      You can check this example  https   jsfiddle net rjurado hnf0zhy1 4

User · Answer

Just style a normal button however you want  using your favorite CSS   Then call a simple JS function to create and link a hidden input element to your styled button  Don t add browser-specific CSS to do the hiding part    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   For more details  research DropZone and gmail uploads

[html] How to customize <input type="file">?

Examples related to html

Examples related to css

Examples related to file-upload

Examples related to input