主頁 > 知識庫 > HTML中文件上傳時使用的<input type="file";元素的樣式自定義

HTML中文件上傳時使用的<input type="file";元素的樣式自定義

熱門標(biāo)簽:昌邑外呼系統(tǒng) 400電話辦理尚景 東莞人工外呼系統(tǒng)多少錢 地圖標(biāo)注地點下載 商丘電話自動外呼系統(tǒng)怎么收費 400電話是在哪里申請 默納克系統(tǒng)外呼顯示inns 周口導(dǎo)航地圖標(biāo)注 朝陽自動外呼系統(tǒng)

Web頁面中,在需要上傳文件時基本都會用到<input type="file">元素,它的默認(rèn)樣式:

chrome下:

IE下:

不管是上面哪種,樣式都比較簡單,和很多網(wǎng)頁的風(fēng)格都不太協(xié)調(diào)。

根據(jù)用戶的需求,設(shè)計風(fēng)格,改變其顯示樣式的場合就比較多了。

如果,要像下面一樣做一個bootstrap風(fēng)格的上傳按鈕該如何實現(xiàn)。

搭建上傳按鈕所需的基本元素


復(fù)制代碼
代碼如下:
<span> <span>上傳</span> <input type="file"> </span>

效果(chrome):

現(xiàn)在看到的分兩行顯示。

外圍之所以沒有換成div,是因為在IE7-瀏覽器中,只要不是設(shè)成inline,它的寬度全都會撐開到能撐到的寬度。如果設(shè)成inline,那元素的寬度就無法調(diào)整,所以這里用span然后設(shè)成inline-block能解決這樣的問題。

增加樣式將兩行變成一行


復(fù)制代碼
代碼如下:
<span"> <span>上傳</span> <input type="file"> </span>

css:


復(fù)制代碼
代碼如下:
.fileinput-button { position: relative; display: inline-block; } .fileinput-button input{ position: absolute; right: 0px; top: 0px; }

效果:

默認(rèn)是沒有淺藍(lán)色邊框,只有鼠標(biāo)去點擊后,才會顯示,這里顯示出來是為了看得清楚。

通過將外圍的span設(shè)成display:relative,將input設(shè)成display:absolute的方式讓他們都脫離文檔流。

通過將input限定在外圍的span中進(jìn)行絕對定位的方式讓本來兩行顯示的變成一行顯示。

實際上這里已經(jīng)overflow了,真正的寬度是“上傳”文字的寬度,修改fileinput-button樣式增加overflow: hidden


復(fù)制代碼
代碼如下:
.fileinput-button { position: relative; display: inline-block; overflow: hidden; }

效果:

很有意思,能看到上邊后右邊的藍(lán)色邊框了吧,其實就是把左邊和下邊的溢出部分給隱藏了。

這時候用鼠標(biāo)去點擊“上傳”兩個字實際上是點在input上,能夠顯示“打開”對話框,因為顯示層級上input要比“上傳”更靠近用戶。

注意input定位中的right,為什么不用left定位。

當(dāng)我們改成left后。

效果(chrome):

效果(IE):

在chrome下input元素中的選擇按鈕露出來,但是沒關(guān)系,可以通過后面的設(shè)透明的方式把它透明掉。

但是在IE下確是會把輸入框露出來,關(guān)鍵是鼠標(biāo)移到輸入框上時,指針會變成輸入狀態(tài),這個就很沒法處理了。

通過right的定位方式把輸入框移到左邊去的方式,可以在IE下回避出現(xiàn)鼠標(biāo)指針變成輸入態(tài)的情況。

透明input元素

css:


復(fù)制代碼
代碼如下:
.fileinput-button { position: relative; display: inline-block; overflow: hidden; } .fileinput-button input{ position: absolute; left: 0px; top: 0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; }

效果:

input完全不見了蹤影,點擊“上傳”依然有效。

可以支持IE8+。

引入bootstrap,并添加按鈕樣式

head中增加外部css和js的引用。


復(fù)制代碼
代碼如下:
<link rel="stylesheet" href="bootstrap/bootstrap.css"> <link rel="stylesheet" href="bootstrap/bootstrap-theme.css"> <script src="bootstrap/jquery-1.10.2.js"></script> <script src="bootstrap/bootstrap.js"></script>

增加按鈕樣式。


復(fù)制代碼
代碼如下:
<span> <span>上傳</span> <input type="file"> </span>

效果:

解決大小問題

如果為fileinput-button樣式增加width:100px,將外圍的span設(shè)成寬100px,會發(fā)現(xiàn)點擊下部是沒有反應(yīng)的,原因就是input是默認(rèn)大小,無法覆蓋下部。

可以通過為input設(shè)置一個很大的字號將其撐大的方式來解決覆蓋問題,這里就設(shè)個200px。


復(fù)制代碼
代碼如下:
.fileinput-button input{ position:absolute; right: 0px; top:0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; }

這樣就能解決覆蓋問題。

完成。

參考:jQuery-File-Upload

如果是要兼容IE7-可以參考jQuery-File-Upload中的寫法。

代碼:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  6.     <link rel="stylesheet" href="bootstrap/bootstrap.css">  
  7.     <link rel="stylesheet" href="bootstrap/bootstrap-theme.css">  
  8.     <script src="bootstrap/jquery-1.10.2.js"></script>  
  9.     <script src="bootstrap/bootstrap.js"></script>  
  10.     <style>  
  11.         .fileinput-button {   
  12.             position: relative;   
  13.             display: inline-block;   
  14.             overflow: hidden;   
  15.         }   
  16.         .fileinput-button input{   
  17.             position:absolute;   
  18.             right: 0px;   
  19.             top: 0px;   
  20.             opacity: 0;   
  21.             -ms-filter: 'alpha(opacity=0)';   
  22.             font-size: 200px;   
  23.         }   
  24.     </style>  
  25. </head>  
  26. <body style="padding: 10px">  
  27.     <div align="center">  
  28.         <span class="btn btn-success fileinput-button">  
  29.             <span>上傳</span>  
  30.             <input type="file">  
  31.         </span>  
  32.     </div>  
  33. </body>  
  34. </html>  

標(biāo)簽:揭陽 福建 健身房 阿拉善盟 湖南 銅陵 沈陽 那曲

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML中文件上傳時使用的&lt;input type="file";元素的樣式自定義》,本文關(guān)鍵詞  HTML,中,文件,上傳,時使,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML中文件上傳時使用的&lt;input type="file";元素的樣式自定義》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML中文件上傳時使用的&lt;input type="file";元素的樣式自定義的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章