Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How do you style file input elements?
01-18-2012, 07:48 PM
Post: #10
RE: How do you style file input elements?
The HTML/CSS structure

I've decided on the following HTML/CSS approach:

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>

The surrounding <div class="fileinputs"> is positioned relatively so that we can create an absolutely positioned layer inside it: the fake file input.

The <div class="fakefile">, containing the fake input and the button, is positioned absolutely and has a z-index of 1, so that it appears underneath the real file input.

The real file input field also gets position: relative to be able to assign it a z-index. After all, the real field should be on top of the fake field. Then we set the opacity of the real file input field to 0, making it effectively invisible.

Hair Transplant Pakistan
Find all posts by this user
Quote this message in a reply
Post Reply 


Messages In This Thread
RE: How do you style file input elements? - hairtransplant - 01-18-2012 07:48 PM

Forum Jump:


User(s) browsing this thread: 1 Guest(s)