[HTML/CSS]uploadifyカスタムボタンスタイル

概要

プロジェクトでは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ファイルで変更されたもので、プロパティで値を再設定することもできます.ここの文字列をあなたが望むものに置き換えればいいです.この文字列はボタンの表示位置をどのように調整するかを探さなければならないので、私は直接空に設定しました.

まとめ

問題が発生し、問題を解決するには、サードパーティのプラグインがよく使われていますが、問題が発生した場合は、コードの一部を修正することで問題を解決することができます.