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

<div class="fileinputs">的位置是relative，这样我们就能在里面放置一个绝对位置的层：假的输入框。

<div class="fakefile">包含一个假的输入框和一个按钮，他的位置是绝对的，z-index值是1，这样他就能在真正的上传框下面显示。

真正的上传框也有位置属性relavtive，这样就能设置他的z-index值了。总之需要上传框在假的输入框之上显示。然后我们设置他的透明度为0，让他不可见。

还需要注意text-align:right：因为Mozilla不能设置上传框的宽度，所以我们要保证浏览按钮在DIV的右边缘，假的按钮也要在右边，而且应该在真的下面。

你还需要一些css代码来设置宽度高度边框等等，在这个例子中我没有写。

为什么是JavaScript？

使用JavaScript的第一个原因就是要把文件路径复制到假的文本框里。

第二，JavaScript会忽略掉没有意义的HTML代码：<div class="fakefile">，让代码保持干净。

最后，对于一些旧的浏览器不能处理CSS，在Netscape和IE4里面文件输入就不可访问。对于那些没有CSS的浏览器，用户会看到两个输入框，而且不能理解第二个是干嘛的。

Netscape 4的问题

在Netscape 4里面用户只能看见按钮。可能是因为position:absolute的原因。

IE4的问题

在IE4里面会有一个诡异的原来的“浏览”按钮的影子，而且不能点击。没有解决办法

Netscape 3的问题

对于那些没有CSS功能的浏览器。虽然可以使用，但是两个输入框会让用户郁闷。

编缉推荐阅读以下文章

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