CSDN自定义File选择效果。-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

CSDN自定义File选择效果。

简介:  csdn.rar    和标准的HTML的File控件不一样。 css样式(upload.css) 点击(此处)折叠或打开 @charset "utf-8"; a.
rar.gif 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. }

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

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

  21. /*取消点击时的虚线框*/
  22. a.files,a.files input {
  23.     outline: none; /*ff*/
  24.     hide-focus: expression(this.hideFocus = true); /*ie*/
  25. }
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="" />

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章