How to make beautiful input type='file' through css and js? How to make that when you click the button input is performed?

 button { background: #333; color: #FFF; border: none; padding: 5px 10px; } input { visibility: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="upload"> <button>Upload</button> <input type="file" /> </div>

    1 answer 1

    input cannot be changed directly, but you can remove it and work with it indirectly.

    You can spy on the jQuery-File-Upload demo

    Make a button, inside insert the name of the button and input .

     <span class="btn btn-success fileinput-button"> <span>Select files...</span> <!-- The file input field used as target for the file upload widget --> <input id="fileupload" name="files[]" multiple="" type="file"> </span>

    We hide and prudently increase input :

     .fileinput-button input { cursor: pointer; font-size: 200px; position: absolute; top: 0px; right: 0px; margin: 0px; direction: ltr; opacity: 0; }

    Now it is invisible and occupies the entire space of the button. demo

    The second way:

     <input type="file" id='upload' /> <label for="upload" class="button">Upload</label>

    css:

     #upload{ display: none; }

    demo

    Now you can customize the appearance of the button in any way.