Как наложить Div с прозрачным входом?

Question

Я создаю небольшой элемент загрузки.

это div (на самом деле карта vue / quasar, но я думаю, это не имеет значения), который реагирует и растет и уменьшается в зависимости от размера окна иviewport.

содержит форму, содержащую вход, и другую проблему с div

:

вход должен быть прозрачным и обеспечивать только функциональность.я хочу, чтобы другой div лежал точно под ним и показывал значок и текст.оба, input и inner 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

Если я правильно понимаю вашу проблему - тогда вам нужно создать ярлык для ввода, скрыть ввод и обозначить стиль так, как вы хотите.Подключите метку и введите идентификатор и для, тогда вы сможете загружать файлы, нажав на метку

, вот пример

[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>