样式:
代码如下 |
复制代码 |
.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:;}
|