更改輸入文件的寬度HTML CSS

Question

通過使用在線上提供的不同說明，我已成功更改了輸入文件標簽的寬度和高度。 但是，當我在按鈕上顯示文本時， <input type="file">不會保持可單擊狀態。 這是我的HTML代碼

<button id="fileInput">
    <label><strong>Browse</strong></label>
    <input type="file" value="Browse"/>
</button>

這是我的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;
}

單擊該按鈕，但未單擊<input type="file"> 。

Answer 1

HTML

<form id="test_form">
  <input type="file" id="test">
  <button>Browse</button>
</form>

CSS

input{position:absolute; top:-100px;}

jQuery的

$("button").click(function() {
    $("#test").click();
})

$('#test').change(function() {
    $('#test_form').submit();
});

JSFiddle： http : //jsfiddle.net/yboss/WxYLA/1/

Answer 2

您試圖將文件輸入放到按鈕中，但我認為它不起作用。 因此，您可以更改輸入的視圖而不是添加按鈕，如此處的已接受答案： 如何自定義<input type =“ file”>？ 或者，您可以做一些我建議的事情，例如：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>

它是我上面給出的問題的第二個答案的轉換形式。