純css美化file檔案上傳控制項方法

在項目開發過程中可能經常也會遇到file控制項，但是這個控制項比較另類，能夠修改的屬性不多，而且樣式外觀各個瀏覽器的表現也不一樣。通常都是不建議類比的，有時候產品很執著說為了統一風格還是希望要去類比下，好吧，出發點都是好的，能做就做吧。也沒想象的那麼困難，只是覺得沒太大的必要。
看到很多群裡面有很多人問起過，很多人的解決方案都不怎麼簡潔，還用Js來控制了，很麻煩的說。後來我就想了下用把file空間透明度調到0的假象來達到類比的效果，做發就是file控制項用一個div包起來，然後這個div設定背景，背景就是所需要類比的那個背景按鈕。

下面你看下效果吧，也是我最近做的一個內部系統的一個案例：

 

代碼如下	複製代碼
<div class="file_box">    <input type="file" class="input-file"> </div> .input-file, .file_box {    display: block;    margin: 5px auto;    width: 60px; } .input-file {    cursor: pointer;    opacity: 0; } .file_box {    background: url("img/slice/file_btn.png") no-repeat ;    cursor: pointer;    height: 26px;    position: relative; }