[HTML/CSS]uploadify自定义按钮样式
浏览数：48 /
时间：2015年06月09日
概述
在项目中经常用到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文件中修改的，也可以在属性中对其重新设置值。把这里的字符串替换成你想要的就可以了。我是直接设置为空了，因为这个字符串在按钮上的显示位置还得去找怎么调整。
总结
遇到问题，解决问题，虽然经常用到第三方的插件，但是遇到问题了，不妨深入的研究一下，修改部分代码即可解决问题。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
