Change Input File width HTML CSS

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.

score 0 · Answer 1 · answered Apr 24 '14 at 17:14

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/

score 0 · Accepted Answer · edited May 23 '17 at 11:52

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.

Change Input File width HTML CSS

2 Answers2