Im trying to create a FORM File input button with my custom styles.
Below is the code, but it doesnt work.
<style type="text/css">
.pictures { width:200px; height:70px; overflow:hidden;}
input{position:absolute; top:-100px;}
</style>
<form id="test_form" method="post">
<div class="pictures">
<input type="file">
<button>Upload</button>
<label>No file selected</label>
</div>
<div class="pictures">
<input type="file">
<button>Upload</button>
<label>No file selected</label>
</div>
<div class="pictures">
<input type="file">
<button>Upload</button>
<label>No file selected</label>
</div>
</form>
<script>
$(function(){
$("button").click(function() {
var $this = $(this),
inputVal = $this.closest('input').val();
$this.closest('input').click(
function(){
$(this).change(function(){
$this.closest('label').text(inputVal);
});
}
);
})
});
</script>
