[HTML/CSS]uploadify自定義按鈕樣式

概述

在項目中經常用到uploadify上傳插件，但是FLASH按鈕的外觀往往跟我們網頁的設計的主題色不太搭配。這時就需要對其樣式進行修改。 

樣式文件是uploadify.css.

打開這個文件后，你會看見CSS設置的按鈕樣式。 

.uploadify-button {
    background-color: #505050;
    background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #505050),
        color-stop(1, #707070)
    );
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border: 2px solid #808080;
    color: #FFF;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    width: 100%;
}
.uploadify:hover .uploadify-button {
    background-color: #606060;
    background-image: linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #606060),
        color-stop(1, #808080)
    );
    background-position: center bottom;
}

用修改下面的代碼替換上面的代碼，用圖片代替是最簡單一種方式：

.uploadify-button {
background:url(upload.PNG);
}
.uploadify:hover .uploadify-button {
background:url(upload.PNG);
}

下面就是修改一下按鈕上的文字了，默認的是"SELECT FILES"，這是英文的，當然你可以通過uploadify的屬性進行修改，為了跟主頁面的文字保持一致，還是要修改成中文的。打開jquery.uploadify.js，搜索這個字符串你就會找到它的位置：

buttonText:" SELECT FILES",

這是在js文件中修改的，也可以在屬性中對其重新設置值。把這里的字符串替換成你想要的就可以了。我是直接設置為空了，因為這個字符串在按鈕上的顯示位置還得去找怎么調整。

總結

遇到問題，解決問題，雖然經常用到第三方的插件，但是遇到問題了，不妨深入的研究一下，修改部分代碼即可解決問題。