如何用透明输入覆盖div？

Question

我正在构建一个小的上传元素。

它是一个div（实际上是一个vue / quasar卡，但我想这没关系），它是响应式的，并且根据窗口大小和视口而增长和缩小。

它包含一个包含输入和另一个div的表单

问题：

输入应该是透明的，只提供功能。我希望另一个div正好位于它之下，并显示一个图标和文字。输入和内部div都应该完全填充封闭元素

我到目前为止所尝试的内容：

使用positions: absolute设置relative和z-index。当位置是相对的时，将宽度和高度设置为100％工作，但元素彼此相邻。当使用绝对位置时，叠加层工作但是输入元素变得比其父元素大得多。我不能直接设置它的大小..

<div style="width: 500px; height: 400px; background-color: #990000">  <!-- actually a card from the vue / quasar framework -->
  <form enctype="multipart/form-data" method="post" style="height: 100%">
    <div class="justify-center column" style="height:100%">
      <input type="file" multiple :name="uploadFieldName" :disabled="isSaving" @change="filesChange()" style="align-content: center; opacity: 0.5; /* invisible but it's there! */
    background-color: yellow;
    width: 100%;
    height: 100%;">
      <div class="justify-center column" style="height: 100%; background-color: #009900;">
        <q-icon name="add" size="40px" color="secondary" class="q-pa-md" />
        <p class="text-secondary no-padding no-margin" style="font-size: 12px">drop documents here</p>
      </div>
    </div>
  </form>
</div>

https://codepen.io/anon/pen/ywNVYB

提前致谢

Answer 1

如果我正确理解你的问题 - 那么你应该为你的输入创建标签，隐藏输入和样式标签你想要的方式。通过id连接标签和输入，然后您就可以上传单击标签的文件

这是一个例子

[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
}

label {
 background-color: gold;
 width: 250px;
 height: 50px;
 border-radius: 8px;
 display: block;
 position: relative;
}

label span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

[type=file]:hover {
  cursor: pointer;
}

<label for='input1'>
  <span>click me or drag your files here</span>
  <input id='input1' type='file'>
</label>