How to customize <input type=“file”>?

Question

Is it possible to change the appearance of <input type="file">?

Answer 1

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>

Answer 2

In webkit you can try this out...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}

Answer 3

It's much better if you just use a <label>, hide the <input>, and customize the label.

HTML:

<input type="file" id="input">
<label for="input" id="label">Choose File</label>

CSS:

input#input{
    display: none;
}
label#label{
    /* Customize your label here */
}

Answer 4

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!

Answer 5

Easiest way..

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>

Answer 6

  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

why not? ^_^

See the example here