tamakisquare tamakisquare - 2 months ago 19
CSS Question

make <input type="file"> element fill up its parent <div>

HTML:

<div>
<img src="some/path/" class="thumbnail" />
<input type="file" class="image_upload" />
</div>


CSS:

div
{
border: 2px solid #ccc;
width: 50px;
height: 50px;
overflow: hidden;
}
.thumbnail
{
width: 100%;
}
.image_upload
{
opacity: 0;
position: absolute;
}


I want
<img>
and
<input type="file">
to overlap with each other and both fill up their parent
<div>
. How can I fix my CSS to achieve that?

Answer

It is not possible to change the size of a file input. You could redesign the file-input and, but the size of the clickable area isn't modifiable.

Edit: Aaron shows a first trick, and I added the second one, so see this fiddle in which the whole image is clickable for the file input.

The trick is to set font-size to a large value, then opacity to zero and finally add overflow: hidden to the parent element.