Default Image

Months format

Show More Text

Load More

Related Posts Widget

Article Navigation

Contact Us Form

404

Sorry, the page you were looking for in this blog does not exist. Back Home

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.


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


2 comments

  1. I have placed everything but I can't get it to indicate the number of files and the name of the files when it is selected, can you help me?

    ReplyDelete
    Replies
    1. Hi Richard,
      Thanks for contacting us. Have you put JS code? or please check targeting Id's in JS code or class. It will work.
      Thanks

      Delete