tamakisquare tamakisquare - 21 days ago 4x
CSS Question

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


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


border: 2px solid #ccc;
width: 50px;
height: 50px;
overflow: hidden;
width: 100%;
opacity: 0;
position: absolute;

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


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.