как увеличить площадь элемента входного файла?

Question

Я использую какой-то стиль, чтобы увеличить площадь элемента входного файла.Чтобы облегчить удаление файла в этот элемент, я хотел бы увеличить его площадь.Использование ширины и высоты свойства css увеличивает площадь, но есть способ выровнять файл выбора по центру или центру.

<div id="container">

<input type=file style="border: 1px solid black; width: 400px; height: 400px;">

</div>

Можно ли добиться чего-то подобного, используя только CSS и HTML?Я ценю любую помощь!

Answer 1

Вы можете использовать CSS, чтобы сделать раздел Drag & Drop размером всего контейнера:

.file {
  height: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.file-input {
  width: 100%;
  height: 100%  
}

<div class="file">
  <input class="file-input" type="file">
</div>

Но чтобы центрировать «Предварительный просмотр» и иметь всю область перетаскивания, вы должны использовать Js, вот CodePen, который вы могли бы использовать в качестве базы: https://codepen.io/prasanjit/pen/NxjZMO.

Answer 2

Просто добавьте немного отступов:

input {
  border: 1px solid black;
  padding: 100px;
}

<div id="container">
  <input type=file>
</div>

Answer 3

Вы можете использовать display:flex вместе с align-items и justify-content в #container div.

#container {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="container">

  <input type="file" />

</div>