CSS自定义文件上传按钮_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > CSS自定义文件上传按钮

CSS自定义文件上传按钮

 2014/4/24 12:30:19  Ranran  博客园  我要评论(0)
  • 摘要:今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的:两边的按钮都有了样式,但中间的选择文件的样式死活调不出来,于是我就同他一块解决,后来经过自己设置width,height折腾无果,再求助google终于找到了解决办法,这个方法是这样的:用一个标签套着文件域,然后调整文件域外边的元素,设置成按钮样式,然后,在把文件域“隐藏”掉(这里的隐藏只是把透明度改为0
  • 标签:上传 文件 自定义

今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的:

两边的按钮都有了样式,但中间的选择文件的样式死活调不出来,于是我就同他一块解决,后来经过自己设置width,height折腾无果,再求助google终于找到了解决办法,这个方法是这样的:

用一个标签套着文件域,然后调整文件域外边的元素,设置成按钮样式,然后,在把文件域“隐藏”掉(这里的隐藏只是把透明度改为0,这样元素还是存在的),这样,当点击“按钮”时就会触发文件域,就可以选择文件了,下面看下代码吧:

html部分:

1 2 3 class="html plain"><a class="btn-file">     <input type="file"> </a>

CSS部分(代码片段):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 .btn-file {     position: relative;     display: inline-block;     width: 156px;     height: 43px;     background: #e4e4e4 url(bg-btn.jpg) no-repeat center center;     text-align: center;     line-height: 68px;     overflow: hidden; }      .btn-file:hover {     background-image: url(bg-btn-hover.jpg); }      .btn-file input {     position: absolute;     top: 0;     left: 0;     width: 156px;     height: 43px;     opacity: 0;     filter: alpha(opacity: 0);     cursor: pointer; }

ok,经过这么一折腾,文件选择按钮就比浏览器默认的好多了。

效果图:

最后,附上Demo及源码下载吧

    

发表评论
用户名: 匿名