CSS -- file上傳，多個瀏覽器統一樣式

< input type ="file" class ="upload" id="impt_uploadBtn" />

HTML中file上傳控件，在各個瀏覽器中顯示的樣式不一樣，爲了統一樣式，使用一下方式修改
主要是設置position元素，將input上傳控件相對父元素relative進行絕對定位，設置right,top值、opacity值使其在整個div裏面隱藏
並將span中“瀏覽”元素坐落在input[type=’file’]可點擊區域內，當點擊瀏覽，可以觸發上傳事件

---

全部代碼：
HTML：

<p style=" display: inline">
   <span> 上傳文件：</span >
   <input id="uploadFile" type="text" class= "text" placeholder="選擇文件" disabled="disabled" />
</p>
<div class= "fileUpload impt_btn btn-primary">
    <span> 瀏覽</span >
    <input type= "file" class="upload" id="impt_uploadBtn" />
</div>

CSS：

.fileUpload {
     // 設置元素的相對定位，作用是使其子元素的absolute相對於此元素進行定位，
     position: relative;
     // 當規定內容溢出元素框時發生的行爲，hidden：多出來的內容被隱藏，不可見
    overflow: hidden ;
    margin: 10px ;
}
.btn-primary{
     color: #FFF;// 設置字體顏色
background-color: #337AB7;// 背景色
border-color: #2E6DA4;// 邊框顏色
}
.impt_btn{
// 將此DIV對象呈遞爲內聯對象，與周圍的內聯對象在同一行上顯示 
display: inline-block;
padding: 6px 12px ; 
font-size: 14px;
font-weight: normal;// 設置文本的粗細，normal:默認值
line-height: 1.42857;//設置行間距離，行高
text-align: center;// 中間顯示
white-space: nowrap;// 如何處理空白，nowrap：文本不會換行，文本會在同一行上繼續顯示，知道遇見<br>標籤
vertical-align: middle;// 元素垂直對齊方式，middle,將此元素放在父元素的中部
cursor: pointer;// 鼠標實現手型
-moz-user-select: none;// 是文字不被選中，不允許用戶進行復制
-webkit-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;// 添加圓角邊框，將4個角，實現圓滑
}
// 設置上傳控件input樣式
input.upload {  
    // 絕對定位，相對於父元素中第一次出現relative進行定位，需設置，left,right,top,buttom值
     position: absolute;
    top: 0 ;
    right: 0 ;
    margin: 0 ;
    padding: 0 ;
    font-size: 20px ;
    cursor: pointer ;
    opacity: 0 ;// 設置元素透明度級別，透明：不顯示。0不顯示
    filter: alpha(opacity =0);// 兼容IE
}

// 使該元素與其他行內元素顯示在一行，div是塊級元素，當設置了此元素後會具有行內元素作用 
style ="display: inline"
#uploadFile{
     line-height: 30px;
    height:30px;
    width:333px;
     color:#999999;
     border:1ps solid #ccc;
}
.text{
     color:#999999;
     border:1ps solid #ccc;
}