CSS自定義文件上傳按鈕

2019-11-14 16:42:38

字體：大中小

供稿：網(wǎng)友

今天一同事問(wèn)我文件上傳按鈕的問(wèn)題，情況是這樣的，他頁(yè)面上有3個(gè)按鈕，分為左中右三個(gè)，左邊的位按鈕甲，右邊的位按鈕乙，而中間的就是個(gè)文件選擇按鈕，情況大概是這個(gè)樣子的：

兩邊的按鈕都有了樣式，但中間的選擇文件的樣式死活調(diào)不出來(lái)，于是我就同他一塊解決，后來(lái)經(jīng)過(guò)自己設(shè)置width,height折騰無(wú)果，再求助google終于找到了解決辦法，這個(gè)方法是這樣的：

用一個(gè)標(biāo)簽套著文件域，然后調(diào)整文件域外邊的元素，設(shè)置成按鈕樣式，然后，在把文件域“隱藏”掉（這里的隱藏只是把透明度改為0，這樣元素還是存在的），這樣，當(dāng)點(diǎn)擊“按鈕”時(shí)就會(huì)觸發(fā)文件域，就可以選擇文件了，下面看下代碼吧：

html部分：

<a class="btn-file">
    <input type="file">
</a>

CSS部分（代碼片段）：

.btn-file {
    position: relative;
    display: inline-block;
    width: 156px;
    height: 43px;
    background: #e4e4e4 url(bg-btn.jpg) no-repeat center center;
    text-align: center;
    line-height: 68px;
    overflow: hidden;
}
    
.btn-file:hover {
    background-image: url(bg-btn-hover.jpg);
}
    
.btn-file input {
    position: absolute;
    top: 0;
    left: 0;
    width: 156px;
    height: 43px;
    opacity: 0;
    filter: alpha(opacity: 0);
    cursor: pointer;
}