How to customize file input type box using CSS and jQuery?
How to customize file input type box using CSS and jQuery?
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>
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" />
