Change Input File width HTML CSS - html

Question

I have successfully changed the width and height of input file tag by using different instructions available online. But when I display text on my button the <input type="file"> does not remain click-able.
This is my HTML code
<button id="fileInput">
<label><strong>Browse</strong></label>
<input type="file" value="Browse"/>
</button>
This is my CSS
#fileInput{
z-index: 9;
width: 250px;
height:40px;
overflow: hidden;
padding:0px;
margin-left:10px;
margin-top:0px;
}
#fileInput input{
margin:0px;
height:50px;
opacity:0;
z-index: 99;
width:350px;
}
#fileInput label strong{
z-index:100;
font-size:30px;
}
The button is clicked but the <input type="file"> is not clicked.

Answer 1

You tried to put file input into button but I think it doesn't work. So, you can change the view of input instead of adding button, like accepted answer here: How to customize <input type="file">?
Or you can do something ,which I advise , like that:
HTML
<
button id="fileInput"><label><strong>Browse</strong></label> </button>
<input type="file" id="input" style="display:none;"/>
JQUERY
<script>
$(document).ready( function() {
$('#fileInput').click(function(){
$("#input").click();
});
});
</script>
It is changed form of second answer of the question that I gave above.

Answer 2

The HTML
<form id="test_form">
<input type="file" id="test">
<button>Browse</button>
</form>
The CSS
input{position:absolute; top:-100px;}
The JQuery
$("button").click(function() {
$("#test").click();
})
$('#test').change(function() {
$('#test_form').submit();
});
JSFiddle: http://jsfiddle.net/yboss/WxYLA/1/