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

Question

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"> overlap with each other and both fill the parent <div> . How can I fix my CSS to achieve this?

Answer 1

Unable to change file input size. You can reverse engineer the input file and , but the size of the area that you can click on cannot be resized.

Edit: Aaron shows the first trick, and I added the second, so see this script in which the whole image can be clicked to enter the file.

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

Answer 2

The file input fields are not really reproducible by the rules (or at least not as you expected). To accomplish what seems to you, you must be creative. Example: http://jsfiddle.net/ZTPCd/

Answer 3

Maybe.

Add this css for input type file

 .My_CSS { opacity: 0; border: none; border-radius: 3px; background: grey; position: absolute; left: 0px; width: 100%; top: 0px; height: 100%; } 

Answer 4

You need to add relative positioning to the parent div , so the input field will not be positioned relative to the browser window. (Google for more information on absolute / relative positioning).

And you need to add a specific positioning (top / left) to the input tag.

http://jsfiddle.net/NbhQY/

(Your outer div should be a little bigger, though, if it should include file upload.)

Answer 5

Here you need to use JavaScript. Since I don’t see any way to change the CSS for the input (type = file), I made it hidden, but the <div> was responsible for the <input type='file'> .

 var box = document.getElementById("box"); var file = document.getElementById("file"); box.addEventListener('click', function(){ file.click(); }) 

 #box { font-size: 30px; text-align: center; width: 300px; height: 200px; padding: 10px; border: 1px solid #999; position: relative; } p { position: absolute; top: 80px; color: white; } #file { width: 100%; height: 100%; visibility: hidden; z-index: 100; } 

 <div id="box"> <img id="image" src="http://guide.denverpost.com/media/photos/full/mountain_600x600.jpg" width="100%" height="100%"/> <input type="file" id="file"/> <p>Click to import</p> </div>