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

您尝试将文件输入放入按钮，但我认为它不起作用。因此，您可以更改输入视图而不是添加按钮，例如此处接受的答案：How to customize <input type="file">? 或者你可以做一些我建议的事情，就像那样： HTML ＆LT;

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>

是上面提出的问题的第2回答的变更形式。

更改输入文件宽度HTML CSS

2 个答案: