CSS自定义文件上传按钮-白红宇

CSS自定义文件上传按钮

阅读量：6847 次

发布时间：2019-06-26

本文共 977 字，大约阅读时间需要 3 分钟。

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

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

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

html部分：

                         
<
a
class
=
"btn-file"
>
    
<
input
type
=
"file"
>
</
a
>
        
      

CSS部分（代码片段）：

                         
.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及源码下载吧

转载于:https://www.cnblogs.com/ranran/p/3685032.html

你可能感兴趣的文章

MyBatis的常见属性总结select、insert、update、delete