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

总结

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

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。

转载:http://www.cnblogs.com/wolf-sun/p/3954517.html
目录
相关文章
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
7 1
|
3天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
4天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
13 0
|
4天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`<html>`、`<head>`、`<body>`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
11 0
|
5天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
11 2
|
5天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3
|
5天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
24 2
|
10天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
18 1
|
10天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
24 1