JavaScript CSS修改学习第五章：给“上传”添加样式

3、然后把<input type="file">的z-index设置为2，这样他就能在普通的input上面显示。

4、最后将<input type="file">的opacity设置为0。这样<input type="file">就看不见了，下面的input/image就能显现出来，但是你还能点击“浏览”按钮。如果这个按钮的位置在图片上面，那么看起来好像点击的就是图片一样。

注意你不能使用visibility：hidden，因为一个真正的不可见元素是不能点击的，我们需要一个能点击的不可见元素。

至此，这个效果可以通过纯CSS显示了，但是还差一点

5、当用户选择了一个文件之后，那个可见的假的输入框应该显示选择文件的路径，就像正常的<input type="file">一样。虽然只需要简单的把<input type="file">的内容复制过来，但是还是需要JavaScript的。

所以这个技术如果没有JavaScript可能不能完全实现。我一会会解释原因。我决定把整个这个想法写成JavaScript的。如果你想使用没有文件名显示的上传框的话也可以使用纯CSS方式，虽然这不是一个好办法。

HTML/CSS结构

我打算用下面的HTML/CSS结构：

01　div.fileinputs　{
02　　　　　position:　relative;
03　}
04　　
05　div.fakefile　{
06　　　　　position:　absolute;
07　　　　　top:　0px;
08　　　　　left:　0px;
09　　　　　z-index:　1;
10　}
11　　
12　input.file　{
13　　　　　position:　relative;
14　　　　　text-align:　right;
15　　　　　-moz-opacity:0　;
16　　　　　filter:alpha(opacity:　0);
17　　　　　opacity:　0;
18　　　　　z-index:　2;
19　}
20　　
21　<div　class="fileinputs">
22　　　　　<input　type="file"　class="file"　/>
23　　　　　<div　class="fakefile">
24　　　　　　　　　<input　/>
25　　　　　　　　　<img　src="http://tech.ddvip.com/2010-03/search.gif"　/>
26　　　　　</div>
27　</div>

编缉推荐阅读以下文章

• JavaScript CSS修改学习第四章：透明度设置
• JavaScript CSS修改学习第三章：修改样式表
• JavaScript CSS修改学习第二章：样式
• JavaScript CSS修改学习第一章：查找位置
• JavaScript CSS Style属性对照表