兼容各浏覽器的 input type=file 文件域美化

本實例主要講一個關于文件域美化 方法,有需要的朋友可以參考一下。

樣式:

代碼如下

.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:;}

更多相關文章
  • 文字複制在js中許多簡單的代碼但那些代碼兼容性都不強了,如果想兼容多浏覽器我們可以使用jquery zclip來實現了,而jquery zclip是基于Flash插件了,下面我們就一起來看一個jquery zclip兼容多浏覽器文字複制例子.zclip是一款基于Flash的jquery插件,所以浏覽 ...
  • 很多朋友都會碰到在使用了flash之後,如果有下拉菜單這種效果,我們下拉菜單在碰到flash之後就會不見了,下面我來給大家介紹一個兼容所有浏覽器的flash遮住div層解決辦法大家最常用的辦法就是•ie:在<obje
  • 添加X-UA-Compatible標簽,提示用戶安裝GFC, 兼容 IE浏覽器
    一個高的寫的添加X-UA-Compatible標簽,提示用戶安裝GFC, 兼容 IE浏覽器的方法,有需要的朋友參考一下.源碼中添加: 代碼如下 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ /> IE=edge ...
  • 本文章總結了三個常用的js讀取XML數據實現代碼,這些都測試過現在主流的浏覽器,可以說是兼容所有浏覽器xml讀取代碼,有面要的朋友可參考.例1 代碼如下 <script type="text/javascript">function loadXML(xmlFile) ...
  • 本文章介紹了取消chrome浏覽器下input和textarea的默認樣式,方法很簡單只要一句就可以搞寫了. 代碼如下 input,button,select,textarea{outline:none}textar
  • min-height和min-width兼容多浏覽器版本做法
    文章介紹了min-height和min-width兼容多浏覽器版本做法,有需要的同學可看看
  • ie9浏覽器怎麽不能上傳文件
    今天發現使用ie9浏覽器怎麽不能上傳文件了,後來找到一個比較好的解決地辦法,下面分享給各位
  • jquery.fileEveryWhere.js是jquery中的一個跨浏覽器的file顯示插件,一個很不錯的控件,但在不同浏覽器會有一點區別.我們可以到主頁:http://aquantum-demo.appspot.com/file-upload下載:https://github.com/blue ...
一周排行