谈及到inputfile美化，相信第一次做的人，肯定会显得有些棘手。
它不像input那么容易用CSS进行美化。
网上也有好多谈论inputfile美化的文章，但是都没有说其中详细思路和原理。
我先说介绍一下这个inputfile吧。
input file它默认的是一个文本框和一个浏览按钮（想要对两者进行美化，还真是不容易。如果你给他加背景的那种还稍微好一些，本文介绍的并非那种美化）。而浏览按钮的文字是和你的操作系统是一致的。
如果想要让其显示英文或者法文，可能你现在还没有思路。那么，你学会了input file美化后，那么一切将会变得那么容易。
大概思路：我们把<input type="file">的透明度设置为0,并隐藏，这个我们不要用hidden，而是用display:none;因为这种不会为隐藏元素保留存放空间。
利用onchaneg来检测<input type="text">的值是否有改变。
然后标签<label>浏览...</label>这个标签当鼠标放上去的时候，我们在利用document.getElementById这个函数来获得<input type="file">的display属性并修改这个属性值为block。
到目前为止还没有完毕，当属性值改为block后，那么意味着什么呢？意味着声明input file为块级元素。
所以，这时应当把input text进行隐藏。然后，打开一个选择窗口，你来选择文档。
大家现在是不是在想，我们把input file进行了display声明为块级元素，那么是不是就要显示了，
当然，如果到目前为止，它就会显示了，解决方法。
我们在之前的<input type="text">加入，onmouseout（鼠标移出）将input file的display值设置为none。这样是不是input file又隐藏了？？呵呵。就是这个原理。下面的这段代码，应该是网上流传比较多的CSS+html。大家看看这个吧。不过，要记得，因为是加入了alpha属性，所以，含有这类的CSS代码，要写到网页文件中。而不是写到外链文件中。
* { font-size:12px}
body { margin:0}
.line { position:relative; float:left; padding:8px 0}
.line span { float:left}
input { border:1px solid #888; vertical-align:middle}
.file { position:absolute; left:90px; top:8px; display:none;filter:alpha(opacity=0);opacity:0}
.file1 { padding:2px 10px; display:block; float:left; background:#FF66CC; color:#fff; z-index:1; margin-left:5px; vertical-align:middle; cursor: pointer}
.inputstyle { width:150px; border:1px solid #888; z-index:99}
<label>上传文件：</label>
<input name="" type="text" id="viewfile" onmouseout="document.getElementById('upload').style.display='none';" class="inputstyle" />
</span>
<label for="unload" onmouseover="document.getElementById('upload').style.display='block';" class="file1">浏览...</label>
<input type="file" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" id="upload" />
评论: