为了账号安全,请及时绑定邮箱和手机立即绑定

[HTML/CSS]uploadify自定义按钮样式

标签:
Html/CSS

概述

在项目中经常用到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     );1
 5     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文件中修改的,也可以在属性中对其重新设置值。把这里的字符串替换成你想要的就可以了。我是直接设置为空了,因为这个字符串在按钮上的显示位置还得去找怎么调整。

总结

遇到问题,解决问题,虽然经常用到第三方的插件,但是遇到问题了,不妨深入的研究一下,修改部分代码即可解决问题。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消