html自帶的file標(biāo)簽太丑了有木有缠黍，并且這東西還不能直接用css修改樣式集嵌。
那么有些網(wǎng)站漂亮的file標(biāo)簽樣式是怎么做出來的呢讥电，像下面這樣：
原理其實(shí)很簡(jiǎn)單女仰，用z-index【層疊級(jí)】和opacity【透明度】猜年，將真正的file標(biāo)簽z-index設(shè)高點(diǎn)，并且使之透明疾忍，然后在它下面在放一個(gè)div用來顯示我們需要的樣式乔外。這樣效果就會(huì)實(shí)現(xiàn)了。讓我們一起實(shí)現(xiàn)一下一罩。
1.首先我們需要一個(gè)div和一個(gè)file標(biāo)簽
<pre>
<div class="File-Box">
<input type="file">
<div class="Show-Box">
<span>+</span>
<span>選擇文件</span>
</div>
</div>
</pre>
他看起來像是這樣的：
2.為了看起來更加清楚杨幼，我們給最外邊的包裹它們的盒字一個(gè)確定的高度和寬度并把它居中
<code>
<style>
*{
padding: 0px;
margin:0px;
}
.File-Box{
position: relative;
width:150px;
height:150px;
margin: 100px auto;
}
</style>
</code>
現(xiàn)在它變成了這個(gè)樣子：
3.接下來讓我們把文件標(biāo)簽隱藏吧，只需在加上下面展示的css代碼
<code>
.File-Box input[type=file]{
cursor:pointer;
width:100%;
height:100%;
z-index: 2;
opacity:0;
position: absolute;
}
</code>
其中cursor使得鼠標(biāo)移到file上面變成一直點(diǎn)擊的手聂渊，position絕對(duì)定位使得file可以和我們所要展示的div處在同一位置只不過一個(gè)在高點(diǎn)差购，一個(gè)低點(diǎn)，等會(huì)看它底下z-index的值就會(huì)明白汉嗽。運(yùn)行代碼欲逃，現(xiàn)在發(fā)現(xiàn)file如我們所愿的消失了：
4.接下來就是把底部的div改成你所喜歡的樣子了
添加如下css代碼：
<code>
.Show-Box{
display: block;
z-index: 1;
width:100%;
height:100%;
position: absolute;
background:#dfdfdf;
border:1px solid #cccccc;
}
.Show-Box div{
font-size: 80px;
color: #999999;
text-align: center;
}
.Show-Box span{
display: block;
font-size: 14px;
text-align: center;
color: #666666;
width:100%;
line-height: 15px;
}
</code>
運(yùn)行結(jié)果：
5.哈哈哈，完成了饼暑，但是我們還需最后一步稳析，當(dāng)鼠標(biāo)移動(dòng)到上面時(shí)加深顏色以便更好的說明鼠標(biāo)已經(jīng)移動(dòng)上去了，代碼只有一行：
點(diǎn)擊一下看看：
哈哈弓叛，大功告成彰居。根據(jù)這個(gè)方法就可以重載很多原生控件了∽辏快去試試吧陈惰。下面是全部代碼：
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin:0px;
}
.File-Box{
position: relative;
width:150px;
height:150px;
margin: 100px auto;
}
.File-Box input[type=file]{
cursor:pointer;
width:100%;
height:100%;
z-index: 2;
opacity:0;
position: absolute;
}
.Show-Box{
display: block;
z-index: 1;
width:100%;
height:100%;
position: absolute;
background:#dfdfdf;
border:1px solid #cccccc;
}
.Show-Box div{
font-size: 80px;
color: #999999;
text-align: center;
}
.Show-Box span{
display: block;
font-size: 14px;
text-align: center;
color: #666666;
width:100%;
line-height: 15px;
}
.File-Box:hover .Show-Box div,.File-Box:hover .Show-Box span{
color:#90c0f5;
}
</style>
</head>
<body>
<div class="File-Box">
<input type="file">
<div class="Show-Box">
<div>+</div>
<span>選擇文件</span>
</div>
</div>
</body>
</html>
</pre>
qq:975066610.微信mz975066610歡迎交流(__) 嘻嘻……
