<div class="fileBox">
<input type="file">
<div class="btn">添加文件</div>
</div>
這裏主要需要注意的是標籤的穿透和input[type="file"]的鼠標移上顯示小手指的問題
首先寫出html佈局
<div class="fileBox">
是爲了給input[type="file"]一個外框,<div class="btn">是顯示在頁面上按鈕的樣式.fileBox{ //給外框設置寬高 加上定位
width: 124px;
height: 35px;
position: relative;
overflow: hidden;
}
input[type="file"]{
width: 124px;
height: 35px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
font-size: 0; //注意,font-size用來去掉input[type="file"]標籤默認的文字
}
.btn-red { //給顯示在頁面上的按鈕寫樣式
width: 120px;
height: 31px;
line-height: 31px;
text-align: center;
border: 2px solid #f7666b;
background-color: #f7666b;
color: #ffffff;
cursor: pointer;
border-radius: 24px;
-webkit-border-radius: 24px;
-o-border-radius: 24px;
-moz-border-radius: 24px;
-ms-border-radius: 24px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
pointer-events: none; //pointer-events:none用來控制該標籤的點擊穿透事件
}