How to Change the CSS of Input Type File

PSD to HTML task is very helpful to learn new things in HTML and CSS. Sometimes when we design our form according to PSD web design, then we need that we can change the input type="file" option according to PSD web design. This is a very easy task. So let's see how can we do that.

First we will write the HTML code for input type="file" -
Normally we write input type="file" with form label like as when we use also bootstrap :- 

<div class="digitfeast-custom-input">
      <form>
             <label class="digitfeast-custom-file-upload"> <i class="fa fa-cloud- upload"> </i> Select File</label>
            <input type="file" class="form-control">
     </form>
</div>

This code will be change to the below code for change the css of input type file -

<div class="digitfeast-custom-input">
       <form>
               <label class="digitfeast-custom-file-upload"><i class="fa fa-cloud-upload"></i> Select File
               <input type="file" class="form-control">
              </label>
       </form>
</div>

CSS for input type file - 

<style>

.digitfeast-custom-input input[type="file"]{
display:none;
}
.digitfeast-custom-file-upload{
background:#3C8DBC;
padding:5px 20px;
color:#fff;
border-radius:3px;
border:1px solid #3C8DBC;
}

</style>

The output of the above code will be like as -

    

The above code will give you the above output and the below code give you the same output but it will show also the file name which you have select - 

HTML Code- 

<form>
        <label for="digitfeastfile-site" class="custom-file-upload">
   <i class="fa fa-cloud-upload"></i> Select File
        </label>
        <input id="digitfeastfile-site" name='digitfeastfilesite' type="file" style="display:none;">
</form>

CSS Code -

<style>
.custom-file-upload{
background:#3C8DBC;
padding:5px 20px;
color:#fff;
border-radius:3px; 
border:1px solid #3C8DBC;
}
.custom-file-upload:hover{
cursor: pointer;
background:#096483;
border:1px solid #096483;
}
</style>

Javascript Code -

<script>
$('#digitfeastfile-site').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#digitfeastfile-site')[0].files[0].name;
  $(this).prev('label').text(file);
});
</script>

This is the simple code for the dynamic custom input-type="file" button.

Read Also - 

* How to change order of divs 

* Amazing Sources of web design inspiration

Web Designing Web Development