Q:

How to customize file input type box using CSS and jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  569 
Very Easy
0

How to customize file input type box using CSS and jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS Opacity and Positioning method

By default different web browser renders the HTML <input type="file"> differently, also if you try to style them with the CSS properties it doesn't work. But, you can use the CSS opacity and position property in combination with the jQuery change() method to create your own HTML custom file upload form control that is consistent across the browsers.

Let's take a look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom File Input Field with CSS and jQuery</title>
<style>
    .custom-file-input{
        display: inline-block;
        overflow: hidden;
        position: relative;
    }
    .custom-file-input input[type="file"]{
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now