How to change the CSS of input type file

Today we will see that how can we change the CSS of input type="file" in the form of HTML. If you are a web-developer or a web-designer, then there are many tasks that you face day by day. When we design a website according to a custom design, then we learn many things at that time. PSD to HTML task is very helpful to learn new thing in HTML and CSS. Sometime 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 very easy task. So let's see that how can we do that.


Custom Input type file button


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="custom-input">
      <form>
             <label class="custom-file-upload"> <i class="fa fa-cloud-                       upload"> </i> Select File</label>
            <input type="file" class="form-control">
     </form>
</div>

So first thing, we note here that when we want to change our input type="file" CSS then we will write the code like as not like above:- 

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

That means we will close our label, tag after input option. And then we will write the CSS code for that. So let's see the CSS code. First, we will hide the input type="file" by use the CSS code. And after that we will make our file upload label like as a file upload button. So here is the code for that.

<style>

.custom-input input[type="file"]{
display:none;
}
.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 -

    


This is the simple CSS and HTML code for Custom input type="file" button".  And if you want that when we upload the file through that custom input type="file" button then file name will be show on the button. Then you can do that thing like as -

HTML Code- 

<form>
        <label for="importfile-site" class="custom-file-upload">
   <i class="fa fa-cloud-upload"></i> Select File
        </label>
        <input id="importfile-site" name='importfilesite' 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>
$('#importfile-site').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#importfile-site')[0].files[0].name;
  $(this).prev('label').text(file);
});
</script>

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

Read Also - 

* How to change order of divs 

* Amazing Sources of web design inspiration


No comments