How to customize file input type box using CSS and jQuery?

How to customize file input type box using CSS and jQuery?

Asked on November 2, 2018 in jQuery.
Add Comment


  • 2 Answer(s)

                    Use the CSS opacity and position property in combination with the jQuery change() method to create your own custom file upload form control that is consistent across the browsers,normal css properties is not work in all browsers.

    For ex:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Custom File Input Field with CSS and jQuery</title>
    <style type="text/css">
      .custom-file-input
    {
        display: inline-block;
        overflow: hidden;
        position: relative;
      }
      .custom-file-input input[type="file"]
    {
        width: 100%;
        height: 100%;
        opacity: 0;
        filter: alpha(opacity=0);
        zoom: 1; /* Fix for IE7 */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
      }
      </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function()
    {
        $('.custom-file-input input[type="file"]').change(function(e)
    {
          $(this).siblings('input[type="text"]').val(e.target.files[0].name);
        });
      });
    </script>
    </head>
    <body>
      <form>
        <div class="custom-file-input">
          <input type="file">
          <input type="text">
          <input type="button" value="Attach">
        </div>
      </form>
    </body>
    </html>
    
    Answered on November 2, 2018.
    Add Comment

    Styling file inputs is notoriously difficult, as most browsers will not change the appearance from either css or javascript.

    Even the size of the input will not respond to the likes of:

    <input type="file" style="width:200px">

    Instead you will need to use the size attribute:

    <input type="file" size="60" />
    Answered on February 25, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.