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