How to customize input type file

Question

Is it possible to change the appearance of  lt input type  file  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

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

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

User · Answer

The trick is hide the input and customize the label.

HTML:

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

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

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

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

to show path of selected file you can try this on html :

<div class="fileinputs">
    <input type="file" class="file">
</div>

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

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

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

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

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

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 && formDOMObj.fileup.value.indexOf(".png") == -1 &&  formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 &&  formDOMObj.fileup.value.indexOf(".JPEG") == -1 && 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!=""&&formDOMObj.tit.value!=""&&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!=""&&formDOMObj.tit.value!=""&&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!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});

HTML:

<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
  <div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
    <input type="file" value="" class="hidden" name="fileup" id="fileup">
    <div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
      <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
      <h1 class="imguploadok"><i class="fa fa-check"></i></h1>
      <h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
      <p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
      <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
    </div>
  </div>
<!--additional fields-->
  <div class="col-md-6">
    <div class="row">
      <div class="form-group" id="top">
        <div class="col-md-12">
          <input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="col-md-12">
          <input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <p class="white">All fields are mandatory</p>
      </div>
      <div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
        <input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
        <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn"  style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
      </div>
    </div>
  </div>
</div>

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

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

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.

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && 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);
});

</script>

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">?

The answer is

Bootstrap example

Examples related to html

Examples related to css

Examples related to file-upload

Examples related to input

Tags