[Html/css]uploadify custom button style

Overview

The uploadify upload plugin is often used in the project, but the Flash button's appearance often does not match the theme color of our web design. You will need to modify the style.

The style file is uploadify.css.

After you open this file, you will see the CSS settings for the button style.

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,Ten Left Bottom, One Left top, A color-stop (0, #505050), - color-stop (1, #707070) -     ); the 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; A Font:Bold 12px Arial, Helvetica, Sans-serif; at text-align:Center; - Text-shadow:0-1px 0 Rgba (0,0,0,0.25); - width:100%; -} - . Uploadify:hover. Uploadify-button{ - Background-color:#606060; in Background-image:linear-gradient (Top, #606060 0, #808080 100%); - Background-image:-o-linear-gradient (Top, #606060 0, #808080 100%); to 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%); the Background-image:-webkit-gradient ( * Linear, $ Left Bottom,Panax Notoginseng Left top, - color-stop (0, #606060), the color-stop (1, #808080) +     ); A background-position:Center Bottom; the}

Replace the above code with the following code, replacing it with a picture in the simplest way:

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

The following is a modified button on the text, the default is "select FILES", which is in English, of course, you can change the properties of the uploadify, in order to keep the text of the main page consistent, or to change into Chinese. Open Jquery.uploadify.js, search for this string and you'll find its location:

ButtonText: "SELECT FILES, this is modified in the JS file, or it can be reset in the properties. Replace the string here with the one you want it to be. I am directly set to empty, because the string on the button display position to find how to adjust. Summarize

Encounter problems, solve problems, although often used to third-party plug-ins, but encountered problems, it may be useful to study in depth, modify some of the code to solve the problem.

[Html/css]uploadify custom button style