本实例主要讲一个关于文件域美化 方法，有需要的朋友可以参考一下。
样式：
| 代码如下 |
|
|
.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
HTML:
<div class="fileInput left">
<input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
<input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
</div>
<span class="tip left" id="upfileResult">图片大小">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>
|
在网上找了一些文件上传按钮美化的，都不是很好，不兼容Firefox。
以下是我的方法(非常简单，且各浏览器都有很好表现)：
| 代码如下 |
|
|
HTML:
<input type="file" name="file_0_ture" size="20" onchange="document.getElementById('file_0').value=this.value" class="text opacity"><input name="file_0" id="file_0" value="" class="text"> <input type="button" value="浏览..." class="file_btn">
CSS:
.opacity {opacity:0;FILTER:Alpha(Opacity=0);}
.text {border: 1px solid #c0c1b3;}
.text.opacity {position:absolute;height:20px;}
.text.file {width:129px!important;width:135px;z-index:100;}
.text.file_btn {height:19px;margin:0 0 -1px 0;width:auto!important;width:60px;background:#f0f0f0;padding:;}
|
