CSS自定义文件上传按钮

2018-06-18 05:11:50来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

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

html部分:

1
2
3
<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及源码下载吧

    

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如何设置页面缓存或不用页面缓存

下一篇:初始ASP.NET数据控件【续 ListView】