CODEWITHSUNDEEP
htmlcss
tamakisquare
tamakisquare

Reputation: 17067

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?

Upvotes: 7

Views: 9623

Answers (5)

RegarBoy
RegarBoy

Reputation: 3521

Here you need to use some JavaScript. Since I don't see any way to change the CSS for input(type=file) itself, I made it hidden but the <div> responsible for <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>

Upvotes: 0

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Its Possible.

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%;
}

Upvotes: 4

Yogu
Yogu

Reputation: 9445

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.

Upvotes: 7

Aaron
Aaron

Reputation: 5227

File input fields don't really play by the rules (or at least as you'd expect). To accomplish what it sounds like you're after, you've gotta get creative. Example: http://jsfiddle.net/ZTPCd/

Upvotes: 6

ptriek
ptriek

Reputation: 9276

You'll need to add relative positioning to the parent div, so the input field won't be positioned relatively to the browser window. (Google for more info about absolute/relative positioning).

And you'll have to add some specific positioning (top/left) to the input tag.

http://jsfiddle.net/NbhQY/

(Your outer div will have to be a little bit bigger, though, if it needs to include a file upload.)

Upvotes: 0

Related Questions