html中，文件上傳時使用的的樣式自定義

時間 2019-11-10

標籤 html 文件上傳使用樣式自定義欄目 HTML 简体版

原文原文鏈接

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

chrome下：html

IE下：jquery

無論是上面哪一種，樣式都比較簡單，和不少網頁的風格都不太協調。chrome

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

若是，要像下面同樣作一個bootstrap風格的上傳按鈕該如何實現。瀏覽器

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

        <span class="">
            <span>上傳</span>
            <input type="file">
        </span>

效果（chrome）：spa

如今看到的分兩行顯示。設計

外圍之因此沒有換成div，是由於在IE7-瀏覽器中，只要不是設成inline，它的寬度全都會撐開到能撐到的寬度。若是設成inline，那元素的寬度就沒法調整，因此這裏用span而後設成inline-block能解決這樣的問題。指針

增長樣式將兩行變成一行

        <span class="fileinput-button"">
            <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 class="btn btn-success fileinput-button">
            <span>上傳</span>
            <input type="file">
        </span>

效果：

解決大小問題

若是爲fileinput-button樣式增長width:100px，將外圍的span設成寬100px，會發現點擊下部是沒有反應的，緣由就是input是默認大小，沒法覆蓋下部。

能夠經過爲input設置一個很大的字號將其撐大的方式來解決覆蓋問題，這裏就設個200px。

       .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中的寫法。

代碼：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <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>
    <style>
        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        .fileinput-button input{
            position:absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
            font-size: 200px;
        }
    </style>
</head>
<body style="padding: 10px">
    <div align="center">
        <span class="btn btn-success fileinput-button">
            <span>上傳</span>
            <input type="file">
        </span>
    </div>
</body>
</html>

相關標籤/搜索

文件上傳