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

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML中文件上傳時使用的<input type=file>元素的樣式自定義

編輯：HTML和Xhtml

Web頁面中，在需要上傳文件時基本都會用到<input type="file">元素，它的默認樣式：

chrome下：

IE下：

不管是上面哪種，樣式都比較簡單，和很多網頁的風格都不太協調。

根據用戶的需求，設計風格，改變其顯示樣式的場合就比較多了。

如果，要像下面一樣做一個bootstrap風格的上傳按鈕該如何實現。

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

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

效果（chrome）：

現在看到的分兩行顯示。

外圍之所以沒有換成div，是因為在IE7-浏覽器中，只要不是設成inline，它的寬度全都會撐開到能撐到的寬度。如果設成inline，那元素的寬度就無法調整，所以這裡用span然後設成inline-block能解決這樣的問題。

增加樣式將兩行變成一行

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

css:

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

效果：

默認是沒有淺藍色邊框，只有鼠標去點擊後，才會顯示，這裡顯示出來是為了看得清楚。

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

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

實際上這裡已經overflow了，真正的寬度是“上傳”文字的寬度，修改fileinput-button樣式增加overflow: hidden

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

效果：

很有意思，能看到上邊後右邊的藍色邊框了吧，其實就是把左邊和下邊的溢出部分給隱藏了。

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

注意input定位中的right，為什麼不用left定位。

當我們改成left後。

效果（chrome）：

效果（IE）：

在chrome下input元素中的選擇按鈕露出來，但是沒關系，可以通過後面的設透明的方式把它透明掉。

但是在IE下確是會把輸入框露出來，關鍵是鼠標移到輸入框上時，指針會變成輸入狀態，這個就很沒法處理了。

通過right的定位方式把輸入框移到左邊去的方式，可以在IE下回避出現鼠標指針變成輸入態的情況。

透明input元素

css：

復制代碼代碼如下: .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的引用。

復制代碼代碼如下: <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>

增加按鈕樣式。

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

效果：