修改Uploadify上传插件的按钮为超链接

因为最近要用到上传功能,之前一直是用jspsmartupload组件上传,一直以来觉得jquery插件的界面好炫,而且在web的各种组件中都有很多不同但功能都很强大的插件,于是搜索了下,选择了uploadify,经过尝试,实现了上传功能,但要求是点击超链接实现上传功能。第一反应我想就是通过css文件来控制的,于是找到uploadify的样式文件uploadify.css,把控制按钮样式的相关css注释掉

/*  .uploadify-button {
    background-color: #505050;
    background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #505050),
        color-stop(1, #707070)
    );
    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;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    width: 100%;
}  */
/* .uploadify:hover .uploadify-button {
    background-color: #606060;
    background-image: linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
    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%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #606060),
        color-stop(1, #808080)
    );
    background-position: center bottom;
}  */

加上自己的css控制:

 .uploadify-button {
   
    text-decoration:underline;
    color:blue
}
 .uploadify:hover .uploadify-button {
   
    text-decoration:underline;
    color:green
}

界面修改前后如下,当然修改后的不是真正的<a>标签超链接

demo上传按钮:

修改后:

假如设置 'buttonText':'select a file to upload...',效果如下:

鼠标移动文字上面效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值