注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

html input[type=file] css样式美化  

2014-08-18 09:51:29|  分类: php |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文最后一次更新于2个月前,文章内容可能略有出入。若发现文章中有错误之处,可以留言评论告诉作者。

1、引子

额,今天在做项目的时候遇到了这个问题,测试人员发现因为没有统一上传按钮,导致页面的样式出现混乱了,丑陋不堪。所以决定做一个新的上传按钮。

原始的样式基本是这样的:

现在要修改的样式为(假设):

相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素。所以不能简单的把input隐藏,放个button上去。

2、方案

DOM结构:

  1. <a href="javascript:;" class="a-upload">
  2. <input type="file" name="" id="">点击这里上传文件
  3. </a>

CSS样式:

  1. /*a upload */
  2. .a-upload {
  3. padding: 4px 10px;
  4. height: 20px;
  5. line-height: 20px;
  6. position: relative;
  7. cursor: pointer;
  8. color: #888;
  9. background: #fafafa;
  10. border: 1px solid #ddd;
  11. border-radius: 4px;
  12. overflow: hidden;
  13. display: inline-block;
  14. *display: inline;
  15. *zoom: 1
  16. }
  17. .a-upload input {
  18. position: absolute;
  19. font-size: 100px;
  20. right: 0;
  21. top: 0;
  22. opacity: 0;
  23. filter: alpha(opacity=0);
  24. cursor: pointer
  25. }
  26. .a-upload:hover {
  27. color: #444;
  28. background: #eee;
  29. border-color: #ccc;
  30. text-decoration: none
  31. }

表现:

html input[type=file] css样式美化 - MICRO CORE - 天边云E家 shaoruisky

修改这样之后,再对a标签进行一定程度的美化即可。

  评论这张
 
阅读(114)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016