·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> CSS自定义文件上传按钮

【如有意向点此提交需求】关于我们

CSS自定义文件上传按钮

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

今天一同事问我文件上传按钮的问题，情况是这样的，他页面上有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及源码下载吧