有输入形式的:
null
.upload-image input {
height: 100% !important;
width: 100% !important;
}
.upload-image-container {
background-color: #f5f7fa;
height: 192px;
width: 320px;
}
.upload-logo-label {
font-family: Open Sans;
top: 0;
color: #afafaf;
z-index: 1;
}<div className="upload-image upload-image-container">
<label
htmlFor="files"
className="upload-logo-label btn"
id="image-input">
Drag & drop logo here
<input
name="image"
id="image-input"
accept="image/*"
onChange={console.log('upload image')}
multiple
type="file"
className="imgInp"
/>
</label>
</div>null
问题是，div首先在顶部创建标签，然后在其下创建输入。 我想要的是把标签（或者不是强制的那个标签，而是任何可以包含文本的东西）放在输入的中间。
现在的情况是这样的:
这就是我想让它看起来的样子（暂且忽略图标）:
此外，目前只有输入是可点击的，标签文本是不可点击的，而且应该可以点击。
有办法做到这一点吗？
实际上我没有尝试过，但是当我为一个客户定制复选框时，有一个非常类似的方法起到了作用。 我会选择这样的东西。。。
<input name="image"
id="image-input"
accept="image/*"
onChange={console.log('upload image')}
multiple
type="file"
class="imgInp"
style="display:none" />
<div id="img-div" class="upload-image upload-image-container">
<label htmlFor="files"
class="upload-logo-label btn"
id="image-input">
Drag & drop logo here
</label>
</div>
<script type="text/javascript">
$("#img-div").on("drop", function (event) {
$("#image-input").trigger("drop", event);
});
$("#img-div").on("click", function (event) {
$("#image-input").trigger("click", event);
});
</script>
