Advertisements
How to customize file input type box using CSS and jQuery
Topic: JavaScript / jQueryPrev|Next
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:
Example
Try this code »<!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>Related FAQ
Here are some more FAQ related to this topic:
- How to fire event on file select in jQuery
- How to get selected file name from file input type using jQuery
- How to create custom radio buttons using CSS and jQuery
- How to create custom checkboxes using CSS and jQuery
- How to create custom select boxes using CSS and jQuery
Advertisements
