Loading

How to Create Custom Input File – CSS – JS/ jQuery

Post Content
Create Custom Input File

Learn How to Create a Custom Input File

You can create a custom input file using pure CSS and JavaScript or jQuery if you are using jQuery.

A screenshot of Normal Input File:

input file

A Customized Input File:

customized input file

Follow steps below to create this custom input file:

  1. Create your HTML content for this input file as the following code:

    <div class="inputFile">
    <label for="file" id=label>Upload File</label>
    <input type="file" id=file name=file>
    </div>
  2. Into your linked CSS file or into your HTML file <head> tag, use the following code:

    .inputFile {
    width:200px;
    height:52px;
    border: 1px solid #000;
    position: relative;
    }
    .inputFile label,input {
    position: absolute;
    top:0;left:0;right:0;bottom:0;
    }
    .inputFile label {
    z-index:1;
    background-color: #212225;
    color: #fff;
    font-size: 22px;
    display: flex;
    justify-content:center;
    align-items:center;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s;
    border: 2px solid #aaa;
    }
    .inputFile:hover label {
    border-color: #fff;
    background-color: #aaa;
    }
    .inputFile input {
    z-index:2;
    opacity:0;
    max-width :100%;
    max-height:100%;
    }
  3. For JavaScript use the following code:

    var label = document.getElementById('label'),
    input = document.getElementById('fileUpload');
    input.onchange=function (){
    var filename=this.value;
    if (filename=='') {
    label.innerText='Select a File';
    } else {
    label.innerText=filename;
    }
    }

    For jQuery users, use the following code:

    $('#fileUpload').change(function() {
    var filename = $('#fileUpload').val();
    if (filename == "") {
    $(this).prev('#label').text('Select a file!');
    } else {
    var filename = $('#fileUpload')[0].files[0].name;
    $(this).prev('#label').text(filename);
    }
    });
  4. Save your work and try clicking on the button displayed on your page and select a file to see the selected file name displayed instead of the text “Upload File”.
  5. Also, if you selected a file, try to click on the button, but don’t select any file, just click on cancel button or press ESC from your keyboard to see the button file text “Upload File” changed to “Select a file!”.

You can see the live code for this work using the following CodePen:

CodePen URL: Here.

Enjoy this work and don’t forget to share it with your friends 😉 !!!

Write a comment

Your email address will not be published. Required fields are marked *

*