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

weixin_34126215發表於2014-09-03
HTMLCSS

概述

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

樣式檔案是uploadify.css.

開啟這個檔案後，你會看見CSS設定的按鈕樣式。 
 1 .uploadify-button {
 2     background-color: #505050;
 3     background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
 4     background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
 5     background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
 6     background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
 7     background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
 8     background-image: -webkit-gradient(
 9         linear,
10         left bottom,
11         left top,
12         color-stop(0, #505050),
13         color-stop(1, #707070)
14     );
15     background-position: center top;
16     background-repeat: no-repeat;
17     -webkit-border-radius: 30px;
18     -moz-border-radius: 30px;
19     border-radius: 30px;
20     border: 2px solid #808080;
21     color: #FFF;
22     font: bold 12px Arial, Helvetica, sans-serif;
23     text-align: center;
24     text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
25     width: 100%;
26 }
27 .uploadify:hover .uploadify-button {
28     background-color: #606060;
29     background-image: linear-gradient(top, #606060 0%, #808080 100%);
30     background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
31     background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
32     background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
33     background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
34     background-image: -webkit-gradient(
35         linear,
36         left bottom,
37         left top,
38         color-stop(0, #606060),
39         color-stop(1, #808080)
40     );
41     background-position: center bottom;
42 }

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

1 .uploadify-button {
2 background:url(upload.PNG);
3 }
4 .uploadify:hover .uploadify-button {
5 background:url(upload.PNG);
6 }

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

buttonText:"SELECT FILES",
這是在js檔案中修改的，也可以在屬性中對其重新設定值。把這裡的字串替換成你想要的就可以了。我是直接設定為空了，因為這個字串在按鈕上的顯示位置還得去找怎麼調整。

總結

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

相關文章