AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSDN自定义File选择效果。

2012-09-04 648
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：  csdn.rar    和标准的HTML的File控件不一样。 css样式(upload.css) 点击(此处)折叠或打开 @charset "utf-8"; a.
 csdn.rar   
和标准的HTML的File控件不一样。
css样式(upload.css)

点击(此处)折叠或打开

  1. @charset "utf-8";
  2. a.btn {
  3.     width: 120px;
  4.     height: 42px;
  5.     overflow: hidden;
  6.     display: block;
  7.     text-decoration: none;
  8.     background: url(chose_file.gif) left top no-repeat;
  9. }

  11. a.files {
  12.     background-image: url(chose_file.gif);
  13. }

  15. /*file设为透明，并覆盖整个触发面*/
  16. a.files input {
  17.     margin-left: -350px;
  18.     font-size: 30px;
  19.     cursor: pointer;
  20.     filter: alpha(opacity = 0);
  21.     opacity: 0;
  22. }

  24. /*取消点击时的虚线框*/
  25. a.files,a.files input {
  26.     outline: none; /*ff*/
  27.     hide-focus: expression(this.hideFocus = true); /*ie*/
  28. }
test.html

点击(此处)折叠或打开

  1. link href="upload.css" rel="stylesheet" type="text/css" />
  2. a href="" class="btn files"> input id="txt_userfile" name="txt_userfile" type="file" onchange="" />

文章标签：
前端开发
wangccsy
目录
相关文章
青玉白露
|
6月前
|
JavaScript 前端开发 容器
如何使用Contentlayer和Tocbot创建博客网站目录？
如何使用Contentlayer和Tocbot创建博客网站目录？
青玉白露
82 0
nini...
|
11月前
CSDN生成目录指南
CSDN生成目录指南
nini...
116 0
云内容小助手
|
监控 Java Apache
Info 内容创建|学习笔记
快速学习 Info 内容创建
云内容小助手
102 0
Info 内容创建|学习笔记
我是咔咔
|
PHP
【ThinkPHP】如何获取think\file的内容
【ThinkPHP】如何获取think\file的内容
我是咔咔
295 0
【ThinkPHP】如何获取think\file的内容
游客2yt7waztrgewg
|
前端开发 JavaScript
uniapp真机调试文件查找失败：‘./pages/index/index.nvue?mpType=page‘； Error: Cannot find module ‘pages/ ———————————————— 版权声明：本文为CSDN博主「前端老实人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_52691965/article/details/119241451
uniapp真机调试文件查找失败：‘./pages/index/index.nvue?mpType=page‘； Error: Cannot find module ‘pages/ ———————————————— 版权声明：本文为CSDN博主「前端老实人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_52691965/article/details/119241451
游客2yt7waztrgewg
2615 0
程序员大阳
|
XML Java 数据库连接
元素类型为 “resultMap“ 的内容必须匹配 “(constructor?,id*,result*,association*,collection*,discriminator?)“ ———————————————— 版权声明：本文为CSDN博主「熊猫大哥大」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/woshisangsang/article/details/79738301
本文目录 1. 现象 2. 原因
程序员大阳
842 0
honeymoose
|
存储
Confluence 6.15 博客页面（Blog Posts）宏参数
参数是让你可以用来控制宏的格式和输出的选项。在 Confluence 存储格式或者 Wiki 标记（wikimarkup）中使用的参数名与在宏浏览器中使用的标签名是不同的，在下面我们将会用括号列出  （example）。
honeymoose
700 0
honeymoose
Confluence 6.15 博客页面（Blog Posts）宏
博客页面宏允许你 Confluence 页面中显示博客页面。通过单击博客的标题将会把你链接到博客页面中。 使用博客页面宏 为了将博客页面宏添加到页面中：  从编辑工具栏中，选择 插入（Insert）   > 其他宏（Other Macros）找到并且选择需要的宏。
honeymoose
775 0
追风筝的猪
|
开发工具 git
博客园首页新随笔联系订阅管理 随笔 - 8 文章 - 0 评论 - 1 Error Running Git Empty git --version output:IDEA关联GitHub时出现这个
博客园 首页 新随笔 联系 订阅 管理 随笔 - 8  文章 - 0  评论 - 1 Error Running Git Empty git --version output:IDEA关联GitHub时出现这个错误 刚刚学习使用idea中，想要把自己的项目上传到github，遇到这样一个问题，先记录下来，到时候解决了在把方法贴出来。
追风筝的猪
2090 0
杰克.陈
|
Web App开发 C#
C# .NET 根据Url链接保存Image图片到本地磁盘
原文:C# .NET 根据Url链接保存Image图片到本地磁盘 根据一个Image的Url链接可以在浏览器中显示一个图片，如果要通过代码将图片保存在本地磁盘可以通过以下方式： 1、首先获取图片的二进制数组。
杰克.陈
2497 0