Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Custom File Input 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> <h2>Default File Input</h2> <label><input type="file"></label> <hr> <h2>Custom File Input</h2> <div class="custom-file-input"> <input type="file"> <input type="text"> <input type="button" value="Attach"> </div> </form> </body> </html>
