Skip to main content

Input type file styling

You can change the styling of your default input type file button with an attractive button design. You can make it attractive using CSS style and also you can hide and trigger it using another button on click event.

  • Make input type file element invisible, add button and on click button trigger click event on input file

    <form method="post">
        <button class="btn btn-success pull-right" onclick="document.getElementById('file').click(); return false;">Upload photo</button>
        <input type="file" name="image" class="image invisible" id="file" accept="image/*">
    </form>
    

    You can use bootstrap CDN which makes the input file invisible (hidden) with class invisible. You can also make the input type file invisible using visibility: hidden; with inline CSS.

     

    Bootstrap CDN 

    <!--  CDN link -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  • Change default input type file button to custom design using CSS

    <input type="file" class="custom-input-file">
    .custom-input-file::-webkit-file-upload-button {
        visibility: hidden;
    }
    .custom-input-file::before {
        content: 'Select some files';
        display: inline-block;
        background: linear-gradient(top, #f9f9f9, #e3e3e3);
        border: 1px solid #999;
        border-radius: 3px;
        padding: 5px 8px;
        outline: none;
        white-space: nowrap;
        -webkit-user-select: none;
        cursor: pointer;
        text-shadow: 1px 1px #fff;
        font-weight: 700;
        font-size: 10pt;
    }
    .custom-input-file:hover::before {
        border-color: black;
    }
    .custom-input-file:active::before {
        background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
    }
    

    You can change the view of the default input type file element to an attractive button design using CSS. You can change the text, color and much more things as per your desire.

  • Back to code snippet queries related javascript