CODEWITHSUNDEEP
csshtml
kofhearts
kofhearts

Reputation: 3774

how to increase area of input file element?

I am using some style to increase the area of input file element. In order to ease dropping file to this element i would like to increase its area. Using the css property width and height increases the area but is there a way to align the choose file to the middle or center. 

<div id="container">

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

</div>

enter image description here

Is it possible to achieve something like this using just css and html? I appreciate any help!

enter image description here

Upvotes: 1

Views: 1825

Answers (2)

Alberto Perez
Alberto Perez

Reputation: 2922

You can use CSS to make the Drag&Drop section the size of the whole container:

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

But in order to center the "Preview" and have all the area to Drag&Drop you must use Js, here is a CodePen that you could you as a base: https://codepen.io/prasanjit/pen/NxjZMO.

Upvotes: 2

iacobalin
iacobalin

Reputation: 598

Just add some padding:

input {
  border: 1px solid black;
  padding: 100px;
}
<div id="container">
  <input type=file>
</div>

Upvotes: 0

Related Questions